A ribbon text banner is a combination of the ribbon banner and the text banner.
When to use
The ribbon text banner is used on the home page or landing page of the website.
Anatomy
1. Ribbon (required)
2. Image (required)
3. Text Container (required)
4. Button
5. Text (required)
Examples
<divclass="ucla-banners__ribbon-text"><divclass="ucla-banner__ribbon"style="background-image: url(../../../theme-assets/img/examples/home-hero-desktop.jpg)"
><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-ribbon ucla-ribbon--brand"><h2class="ucla-ribbon__text">Lorem ispum dolor sit amet
consectetuer adipiscing</h2></div></div></div></div></div><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-banner__text"><divclass="container"><divclass="ucla"><divclass="col span_10_of_12 ucla-prose mx-auto"><pclass="lead">This text banner helps focus people's attention
on a single call to action. Limit copy in this banner to 200
characters or less. Lorem ipsum dolor sit amet, consectetur
adipiscing elit sed do eiusmod.</p><buttonclass="ucla-btn ucla-btn--primary-light">Button</button></div></div></div></div></div></div></div></div>
<divclass="ucla-banners__ribbon-text"><divclass="ucla-banner__ribbon"style="background-image: url(../../../theme-assets/img/examples/home-hero-desktop.jpg)"
><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-ribbon ucla-ribbon--brand"><h2class="ucla-ribbon__text">Lorem ispum dolor sit amet
consectetuer adipiscing</h2></div></div></div></div></div><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-banner__text ucla-banner__text-white"><divclass="container"><divclass="ucla"><divclass="col span_10_of_12 ucla-prose mx-auto"><pclass="lead">This text banner helps focus people's attention
on a single call to action. Limit copy in this banner to 200
characters or less. Lorem ipsum dolor sit amet, consectetur
adipiscing elit sed do eiusmod.</p><buttonclass="ucla-btn ucla-btn--primary-light">Button</button></div></div></div></div></div></div></div></div>
Best practices
Use high-quality images that are visually striking and engaging. This will help grab the user’s attention and set the tone for the page.
Choose images that are relevant to the page’s content and help communicate the message or purpose.
Limit 1 - 2 ribbons per page and focus on your most important message.
Keep ribbon length between 25 - 30 characters and between 3 - 5 lines.
Use clear, concise text that is easy to read and understand. This will help grab the user’s attention and make it easy for them to understand the message of the banner.
Keep the text short and to the point. A text banner with too much text can be overwhelming for the user and make it difficult for them to understand the message.
The Ribbon Text Banner is a combination of the Ribbon Banner and the contained Text Banner. The text banner portion does have a negative margin-top to bring up the blue box.
The component is built with the following structure:
.ucla-banners__ribbon-text - Container
.ucla-banner__ribbon - Start of ribbon component. Background image goes on this element
.container - Container that sets the width of the content
.ucla - Container that houses the columns
.col.span_12_of_12 - Column that spans the full width of the container
.ucla-ribbon.ucla-ribbon--brand - Start of the Brand Ribbon component
.ucla-ribbon__text - Text for the ribbon
.ucla-banner__text - Container for the banner
.container - Container to keep the width of the content
.ucla - Start of the grid column system
.col.span_10_of_12.ucla-prose.mx-auto - Sets the width and the typography for the content.
Lorem ispum dolor sit amet consectetuer adipiscing
This text banner helps focus people's attention on a single call to action. Limit copy in this banner to 200 characters or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
<divclass="ucla-banners__ribbon-text"><divclass="ucla-banner__ribbon"style="background-image: url(/theme-assets/img/examples/home-hero-desktop.jpg)"><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-ribbon ucla-ribbon--brand"><h2class="ucla-ribbon__text">Lorem ispum dolor sit amet consectetuer adipiscing</h2></div></div></div></div></div><divclass="container"><divclass="ucla"><divclass="col span_12_of_12"><divclass="ucla-banner__text"><divclass="container"><divclass="ucla"><divclass="col span_10_of_12 ucla-prose"style="margin: 0 auto;"><pclass="lead">This text banner helps focus people's attention on a single call to action. Limit copy in this banner to 200 characters or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.</p><buttonclass="ucla-btn ucla-btn--primary-light">Button</button></div></div></div></div></div></div></div></div>
White Background Variant
If you prefer to use the Text Banner with a white background, add .ucla-banner__text-white class to the .ucla-banner__text element.
Lorem ispum dolor sit amet consectetuer adipiscing
This text banner helps focus people's attention on a single call to action. Limit copy in this banner to 200 characters or less. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.
