UCLA Web Components

typography 

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


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


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


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


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


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


<!-- Paragraph Lead -->
<p class="lead">
    <!--
  font-size: 1.5rem; line-height 1.33;
  -->
    This is lead paragraph.
</p>


<!-- Paragraph -->
<p>
    This is a paragraph.
</p>


<!-- Paragraph Small -->
<p class="body-copy-small">This is a small paragraph.</p>


<!-- Code -->
<p>To display code, use the <code>&lt;code&gt;</code> tag.</p>


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


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


<!-- Right Align -->
<p class="right-align">Right-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 <mark>marked</mark>.</p>


<!-- Inserted -->
<p>This sentence contains text that has been <ins>inserted</ins>.</p>


<!-- Blockquote -->
<figure class="blockquote">
    <blockquote cite="https://www.ucla.edu">
        <p>This paragraph contains text that is in a blockquote. Don't put a blockquote in a figure. But you can put a figure in a blockquote. Implement HTML5 blockquote element.</p>
    </blockquote>
    <figcaption>First Name Last Name<br /><em>Title</em><br /><cite>Source</cite></figcaption>
</figure>


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

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

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

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

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

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

<!-- Paragraph Lead -->
<p class="lead">
  <!--
  font-size: 1.5rem; line-height 1.33;
  -->
  This is lead paragraph.
</p>

<!-- Paragraph -->
<p>
  This is a paragraph. 
</p>

<!-- Paragraph Small -->
<p class="body-copy-small">This is a small paragraph.</p>

<!-- Code -->
<p>To display code, use the <code>&lt;code&gt;</code> tag.</p>

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

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

<!-- Right Align -->
<p class="right-align">Right-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 <mark>marked</mark>.</p>

<!-- Inserted -->
<p>This sentence contains text that has been <ins>inserted</ins>.</p>

<!-- Blockquote -->
<figure class="blockquote">
  <blockquote cite="https://www.ucla.edu">
    <p>This paragraph contains text that is in a blockquote. Don't put a blockquote in a figure. But you can put a figure in a blockquote. Implement HTML5 blockquote element.</p>
  </blockquote>
  <figcaption>First Name Last Name<br/><em>Title</em><br /><cite>Source</cite></figcaption>
</figure>
 
/* H 1: No context defined. */


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


/* H 3 */
{
  "order": 3
}


/* H 4 */
{
  "order": 4
}


/* H 5 */
{
  "order": 5
}


/* H 6 */
{
  "order": 6
}


/* Paragraph Lead */
{
  "order": 7
}


/* Paragraph */
{
  "order": 8
}


/* Paragraph Small */
{
  "order": 9
}


/* Code */
{
  "order": 10
}


/* Left Align */
{
  "order": 11
}


/* Center Align */
{
  "order": 12
}


/* Right Align */
{
  "order": 13
}


/* Strong */
{
  "order": 14
}


/* Emphasis */
{
  "order": 15
}


/* Deleted */
{
  "order": 16
}


/* Marked */
{
  "order": 17
}


/* Inserted */
{
  "order": 18
}


/* Blockquote */
{
  "order": 19
}

No notes defined.