UCLA Web Components

Ribbons

bitbucket Report an Issue Slack Join the Slack Discussion

Highlight important ideas or brand tag lines.

Usage

Usability Guidance

  • Limit 1-2 ribbons per page and focus on your most important message.

Accessibility Requirements

  • Use the approved brand colors to ensure ribbons have high color contrast and meet accessibility standards.
  • Use the <aside> element to denote ribbons as standalone content.

Ribbon

Code

<!-- RIBBON -->
<h2>Brand</h2>
<div class="ribbon"><h2>15 of the 20 largest fires in Californian history have occurred since 2000.</h2></div>

Highlight Ribbon

Code

<!-- HIGHLIGHT RIBBON -->
<h2 class="mt-24">Highlight</h2>
<h3>Left Align</h3>
<div class="ribbon ribbon--highlight"><h3>85% of undergraduates enroll in the college.</h3></div>
<h3 class="mt-12">Right Align</h3>
<div class="ribbon ribbon--highlight ribbon--right"><h3>85% of undergraduates enroll in the college.</h3></div>