Highlight Ribbon

Highlight ribbons are used to callout a piece fact, ranking, or accolade that is secondary to the main content.

When to use

This is used for information that is secondary to the main content being communicated as opposed to Stat Bars or Factiod components that are the main content.

Anatomy

1. Text (required)

2. Background color (required)

Examples

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

Best Practices

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

Building a highlight ribbon is simple:

• .ucla-ribbon.ucla-ribbon--highlight - Container and variant
  • .ucla-ribbon__text - Text (Can be any heading/element)

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