Ribbon treatments bring emphasis to headlines. When using ribbon treatments over photos, try not to be too wordy. Short, punchy sentences are best because they do not distract from the image.
When to use
The branding ribbon is used on top of an image banner, often on a home page or prominent landing page. Do not overuse on interior level informational pages.
Anatomy
1. Text (required)
2. Background color (required)
Examples
<div class="ucla-ribbon ucla-ribbon--brand"><h2 class="ucla-ribbon__text">Lorem
ipsum dolor sit amet consectetuer adipiscing</h2></div>Best Practices
Limit 1-2 ribbons per page and focus on your most important message.
Keep ribbon length between 25-30 characters and between 1-4 lines.