UCLA Component Library

typography 

<!-- Default -->



<!-- H 1 -->
<h1>H1 Title</h1>
<!-- Class name styles inheritance -->
<!-- <p class="h1">H1 Title</p> -->


<!-- H 2 -->
<h2>H2 Title</h2>
<!-- Class name styles inheritance -->
<!-- <p class="h2">H2 Title</p> -->


<!-- H 3 -->
<h3>H3 Title</h3>
<!-- Class name styles inheritance -->
<!-- <p class="h3">H3 Title</p> -->


<!-- H 4 -->
<h4>H4 Title</h4>
<!-- Class name styles inheritance -->
<!-- <p class="h4">H4 Title</p> -->


<!-- H 5 -->
<h5>H5 Title</h5>
<!-- Class name styles inheritance -->
<!-- <p class="h5">H5 Title</p> -->


<!-- H 6 -->
<h6>H6 Title</h6>
<!-- Class name styles inheritance -->
<!-- <p class="h6">H6 Title</p> -->


<!-- Lead -->
<p class="lead">
    <!--
  font-size: 24px; line-height 30px;
  -->
    This is lead copy.
</p>


<!-- Body Copy -->
<p>
    This is body copy. A series of sentences together which make a paragraph.
</p>


<!-- Body Copy Small -->
<p class="body-copy-small">Body Copy Small</p>


<!-- Code -->
<code>This is code style.</code>


<!-- Right Align -->
<p class="right-align">Right-Aligned Text</p>


<!-- Center Align -->
<p class="center-align">Center-Aligned Text</p>


<!-- Left Align -->
<p class="left-align">Left-Aligned Text</p>


<!-- Strong -->
<p>This sentence contains text styled as <strong>strong</strong>.</p>


<!-- Emphasis -->
<p>This sentence contains text styled as <em>emphasis</em></p>


<!-- Deleted -->
<p>This sentence contains text styled as <del>strike</del></p>


<!-- Marked -->
<p>This sentence contains text that has been <span class="mark-text">marked</span>.</p>


<!-- Inserted -->
<p>This sentence contains text that has been <span class="insert-text">inserted.</span></p>


<!-- Blockquote -->
<div class="blockquote-wrapper">
    <div class="blockquote">
        <p class="blockquote__quote">Quote copy. A series of senences together which make a paragraph. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus caborundum e pluribus unum.</p>
        <p class="blockquote__citation">&mdash; First Last Name in <em>Source</em></p>
    </div>
</div>