Infobox

Highlighted callout boxes for important information, tips, or warnings, with default and dark variants.

Default Infobox

Default infobox

Important Notice

Road construction on the main park loop may cause delays of up to 30 minutes. Plan your visit accordingly and check current conditions before departing.

<div class="ug-infobox">
  <div class="ug-infobox__title">Important Notice</div>
  <p>Road construction on the main park loop may cause delays of up to 30 minutes. Plan your visit accordingly and check current conditions before departing.</p>
</div>

Infobox without Title

Simple infobox

All visitors must carry bear spray in the backcountry. Canisters are available for rent at the visitor center.

<div class="ug-infobox">
  <p>All visitors must carry bear spray in the backcountry. Canisters are available for rent at the visitor center.</p>
</div>

Dark Infobox

Dark variant

Fire Danger: High

Open fires are prohibited in all areas of the park until further notice. Only gas stoves permitted in designated camping areas.

<div class="ug-infobox ug-infobox--dark">
  <div class="ug-infobox__title">Fire Danger: High</div>
  <p>Open fires are prohibited in all areas of the park until further notice. Only gas stoves permitted in designated camping areas.</p>
</div>

Dark Infobox without Title

Simple dark infobox

The park entrance fee is $35 per vehicle, valid for 7 days. Annual passes are available for $70.

<div class="ug-infobox ug-infobox--dark">
  <p>The park entrance fee is $35 per vehicle, valid for 7 days. Annual passes are available for $70.</p>
</div>

Multiple Infoboxes

Infoboxes in context

Tip

Arrive before 9 AM to avoid crowds at popular trailheads.

Warning

Approaching wildlife within 100 yards is prohibited. Use binoculars or a telephoto lens for safe viewing.

<div class="ug-infobox">
  <div class="ug-infobox__title">Tip</div>
  <p>Arrive before 9 AM to avoid crowds at popular trailheads.</p>
</div>
<div style="margin-top:1rem">
  <div class="ug-infobox ug-infobox--dark">
    <div class="ug-infobox__title">Warning</div>
    <p>Approaching wildlife within 100 yards is prohibited. Use binoculars or a telephoto lens for safe viewing.</p>
  </div>
</div>

Class Reference

Class	Description
`.ug-infobox`	Infobox container (light background, left border)
`.ug-infobox--dark`	Dark background variant (white text)
`.ug-infobox__title`	Uppercase title/label