UCLA Web Components

Ribbons 

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


<!-- Highlight -->
<!-- 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>


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

<!-- Highlight -->
<!-- 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>
 
/* Brand: No context defined. */


/* Highlight */
{
  "order": 2
}

No notes defined.