University of Leeds Design System v1.0.13

Size

No notes defined.

<p class="text-size-epic">Text size: Epic</p>
<p class="text-size-heading-1">Text size: Heading 1</p>
<p class="text-size-heading-2">Text size: Heading 2</p>
<p class="text-size-heading-3">Text size: Heading 3</p>
<p class="text-size-heading-4">Text size: Heading 4</p>
<p class="text-size-heading-5">Text size: Heading 5</p>
<p class="text-size-heading-6">Text size: Heading 6</p>

<p class="text-size-paragraph">Text size: Paragraph</p>
<p class="text-size-paragraph--small">Text size: Paragraph Small</p>
<p class="text-size-paragraph--intro">Text size: Paragraph Intro</p>
<p class="text-size-blockquote">Text size: Blockquote</p>
<p class="text-size-pullquote">Text size: Pullquote</p>
<p class="text-size-caption">Text size: Caption</p>

{# <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse natus voluptatum illo similique molestiae accusantium eius tempore sed eos consectetur ullam ipsa non suscipit, nobis deserunt doloremque, velit recusandae odio.</p>

<h1><strong>Heading 1</strong></h1>
<h2><strong>Heading 2</strong></h2>
<h3><strong>Heading 3</strong></h3>

<p><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse natus voluptatum illo similique molestiae accusantium eius tempore sed eos consectetur ullam ipsa non suscipit, nobis deserunt doloremque, velit recusandae odio.</strong></p>

<div class="cms">
  <h1>Heading 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
  <h2>Heading 2</h2>
  <P>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis dolores aliquid maxime asperiores in excepturi voluptas mollitia. Dolores, accusantium dicta quos cumque quaerat similique eveniet aspernatur sapiente rem explicabo modi!</P>
  <P>Dolorum animi quia excepturi commodi! Dicta explicabo cupiditate tempora error quam adipisci animi impedit repellendus sapiente sit modi veniam commodi neque velit, quo, architecto esse inventore veritatis autem aut praesentium?</P>
  <P>Blanditiis aliquid, voluptatibus sunt quam ut excepturi delectus sint veniam minima vero esse! Voluptas incidunt totam quisquam rerum saepe commodi. Dolor aperiam libero ratione pariatur quam? Numquam adipisci ipsa amet.</P>
  <P>Quibusdam quo, soluta hic, ipsa porro maiores aliquam architecto eveniet sint culpa, aliquid eius. Sint iure quas molestias pariatur nihil. Eius provident ea natus earum harum nulla odio ipsum maxime!</P>
  <P>Temporibus similique facere animi corrupti earum suscipit facilis voluptatibus vel accusamus optio quidem sint ipsam, tenetur porro beatae. Corporis eaque suscipit temporibus ab deleniti quaerat aperiam vitae, aliquam delectus repellendus.</P>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
  <h3>Heading 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
  <h4>Heading 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
  <h5>Heading 5</h5>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
  <h6>Heading 6</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione praesentium eveniet modi fuga voluptatibus iure nam, dolorem, vero placeat iste, eius culpa sequi dolor molestias. Placeat, dolores. Nam, similique modi!</p>
</div> #}
 
<p class="text-size-epic">Text size: Epic</p>
<p class="text-size-heading-1">Text size: Heading 1</p>
<p class="text-size-heading-2">Text size: Heading 2</p>
<p class="text-size-heading-3">Text size: Heading 3</p>
<p class="text-size-heading-4">Text size: Heading 4</p>
<p class="text-size-heading-5">Text size: Heading 5</p>
<p class="text-size-heading-6">Text size: Heading 6</p>

<p class="text-size-paragraph">Text size: Paragraph</p>
<p class="text-size-paragraph--small">Text size: Paragraph Small</p>
<p class="text-size-paragraph--intro">Text size: Paragraph Intro</p>
<p class="text-size-blockquote">Text size: Blockquote</p>
<p class="text-size-pullquote">Text size: Pullquote</p>
<p class="text-size-caption">Text size: Caption</p>
  • Content: 
    .text-size-epic {
  @extend %text-size-epic;
}

.text-size-heading-1 {
  @extend %text-size-heading-1;
}

.text-size-heading-2 {
  @extend %text-size-heading-2;
}

.text-size-heading-3 {
  @extend %text-size-heading-3;
}

.text-size-heading-4 {
  @extend %text-size-heading-4;
}

.text-size-heading-5 {
  @extend %text-size-heading-5;
}

.text-size-heading-6 {
  @extend %text-size-heading-6;
}

.text-size-paragraph {
  @extend %text-size-paragraph;
}

.text-size-paragraph--small {
  @extend %text-size-paragraph--small;
}

.text-size-paragraph--intro {
  @extend %text-size-paragraph--intro;
}

.text-size-blockquote {
  @extend %text-size-blockquote;
}

.text-size-pullquote {
  @extend %text-size-pullquote;
}

.text-size-caption {
  @extend %text-size-caption;
}
  • URL: /components/raw/uol-typography-size/_typography-size.scss
  • Filesystem Path: src/library/01-foundations/01-typography/01-typography-size/_typography-size.scss
  • Size: 769 Bytes
  • Handle: @uol-typography-size
  • Preview:
  • Filesystem Path: src/library/01-foundations/01-typography/01-typography-size/typography-size.njk 
/* No context defined. */