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 -->
<div class="ribbon"><h2>15 of the 20 largest fires in Californian history have occurred since 2000.</h2></div>

Highlight Ribbon

Code

<!-- HIGHLIGHT RIBBON -->
<div class="ribbon ribbon--highlight"><h3>85% of undergraduates enroll in the college.</h3></div>

<div class="ribbon ribbon--highlight ribbon--right"><h3>85% of undergraduates enroll in the college.</h3></div>