D.School Component Library

Typography Examples 

<div class="typography-styles">
    <div class="typography-category">
        <h2 class="typography-category__title">Headings</h2>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h0-primary</p>
            </div>
            <p class="o-heading--h0-primary">H0 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h0-secondary</p>
            </div>
            <p class="o-heading--h0-secondary">H0 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h0-secondary-bold</p>
            </div>
            <p class="o-heading--h0-secondary-bold">H0 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h1-primary</p>
            </div>
            <p class="o-heading--h1-primary">H1 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h1-secondary</p>
            </div>
            <p class="o-heading--h1-secondary">H1 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h1-secondary-bold</p>
            </div>
            <p class="o-heading--h1-secondary-bold">H1 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h2-primary</p>
            </div>
            <p class="o-heading--h2-primary">H2 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h2-secondary</p>
            </div>
            <p class="o-heading--h2-secondary">H2 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h2-secondary-bold</p>
            </div>
            <p class="o-heading--h2-secondary-bold">H2 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h3-primary</p>
            </div>
            <p class="o-heading--h3-primary">H3 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h3-secondary</p>
            </div>
            <p class="o-heading--h3-secondary">H3 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h3-secondary-bold</p>
            </div>
            <p class="o-heading--h3-secondary-bold">H3 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h4-primary</p>
            </div>
            <p class="o-heading--h4-primary">H4 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h4-secondary</p>
            </div>
            <p class="o-heading--h4-secondary">H4 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h4-secondary-bold</p>
            </div>
            <p class="o-heading--h4-secondary-bold">H4 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h5-primary</p>
            </div>
            <p class="o-heading--h5-primary">H5 Primary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h5-secondary</p>
            </div>
            <p class="o-heading--h5-secondary">H5 Secondary</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h5-secondary-bold</p>
            </div>
            <p class="o-heading--h5-secondary-bold">H5 Secondary Bold</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-heading--h6-primary</p>
            </div>
            <p class="o-heading--h6-primary">H6 Primary</p>
        </div>
    </div>
    <div class="typography-category">
        <h2 class="typography-category__title">Body Text</h2>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-body--p1-primary</p>
            </div>
            <p class="o-body--p1-primary">Body P1 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-body--p1-secondary</p>
            </div>
            <p class="o-body--p1-secondary">Body P1 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-body--p2-primary</p>
            </div>
            <p class="o-body--p2-primary">Body P2 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-body--p2-secondary</p>
            </div>
            <p class="o-body--p2-secondary">Body P2 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="typography-category">
        <h2 class="typography-category__title">Captions</h2>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-caption--primary-caption1</p>
            </div>
            <p class="o-caption--primary-caption1">Caption 1 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-caption--secondary-caption1</p>
            </div>
            <p class="o-caption--secondary-caption1">Caption 1 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-caption--primary-caption2</p>
            </div>
            <p class="o-caption--primary-caption2">Caption 2 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <div class="typography-category">
        <h2 class="typography-category__title">UI Details</h2>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--1</p>
            </div>
            <p class="o-detail--1">UI Detail 1</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--2</p>
            </div>
            <p class="o-detail--2">UI Detail 2</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--3</p>
            </div>
            <p class="o-detail--3">UI Detail 3</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--4</p>
            </div>
            <p class="o-detail--4">UI Detail 4</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--5</p>
            </div>
            <p class="o-detail--5">UI Detail 5</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--6</p>
            </div>
            <p class="o-detail--6">UI Detail 6</p>
        </div>
        <div class="typography-example">
            <div class="typography-example__info">
                <p class="typography-example__label">.o-detail--7</p>
            </div>
            <p class="o-detail--7">UI Detail 7</p>
        </div>
    </div>
</div>
 
<div class="typography-styles">
  {% for section in headings %}
    <div class="typography-category">
      <h2 class="typography-category__title">Headings</h2>
      {% for style in section.styles %}
        <div class="typography-example">
          <div class="typography-example__info">
            <p class="typography-example__label">.{{ style.class }}</p>
          </div>
          <p class="{{ style.class }}">{{ style.text }}</p>
        </div>
      {% endfor %}
    </div>
  {% endfor %}
  {% if body %}
    <div class="typography-category">
      <h2 class="typography-category__title">{{ body.category }}</h2>
      {% for style in body.styles %}
        <div class="typography-example">
          <div class="typography-example__info">
            <p class="typography-example__label">.{{ style.class }}</p>
          </div>
          <p class="{{ style.class }}">{{ style.text }}</p>
        </div>
      {% endfor %}
    </div>
  {% endif %}
  {% if captions %}
    <div class="typography-category">
      <h2 class="typography-category__title">{{ captions.category }}</h2>
      {% for style in captions.styles %}
        <div class="typography-example">
          <div class="typography-example__info">
            <p class="typography-example__label">.{{ style.class }}</p>
          </div>
          <p class="{{ style.class }}">{{ style.text }}</p>
        </div>
      {% endfor %}
    </div>
  {% endif %}
  {% if details %}
    <div class="typography-category">
      <h2 class="typography-category__title">{{ details.category }}</h2>
      {% for style in details.styles %}
        <div class="typography-example">
          <div class="typography-example__info">
            <p class="typography-example__label">.{{ style.class }}</p>
          </div>
          <p class="{{ style.class }}">{{ style.text }}</p>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</div>
 
{
  "headings": [
    {
      "styles": [
        {
          "class": "o-heading--h0-primary",
          "text": "H0 Primary"
        },
        {
          "class": "o-heading--h0-secondary",
          "text": "H0 Secondary"
        },
        {
          "class": "o-heading--h0-secondary-bold",
          "text": "H0 Secondary Bold"
        },
        {
          "class": "o-heading--h1-primary",
          "text": "H1 Primary"
        },
        {
          "class": "o-heading--h1-secondary",
          "text": "H1 Secondary"
        },
        {
          "class": "o-heading--h1-secondary-bold",
          "text": "H1 Secondary Bold"
        },
        {
          "class": "o-heading--h2-primary",
          "text": "H2 Primary"
        },
        {
          "class": "o-heading--h2-secondary",
          "text": "H2 Secondary"
        },
        {
          "class": "o-heading--h2-secondary-bold",
          "text": "H2 Secondary Bold"
        },
        {
          "class": "o-heading--h3-primary",
          "text": "H3 Primary"
        },
        {
          "class": "o-heading--h3-secondary",
          "text": "H3 Secondary"
        },
        {
          "class": "o-heading--h3-secondary-bold",
          "text": "H3 Secondary Bold"
        },
        {
          "class": "o-heading--h4-primary",
          "text": "H4 Primary"
        },
        {
          "class": "o-heading--h4-secondary",
          "text": "H4 Secondary"
        },
        {
          "class": "o-heading--h4-secondary-bold",
          "text": "H4 Secondary Bold"
        },
        {
          "class": "o-heading--h5-primary",
          "text": "H5 Primary"
        },
        {
          "class": "o-heading--h5-secondary",
          "text": "H5 Secondary"
        },
        {
          "class": "o-heading--h5-secondary-bold",
          "text": "H5 Secondary Bold"
        },
        {
          "class": "o-heading--h6-primary",
          "text": "H6 Primary"
        }
      ]
    }
  ],
  "body": {
    "category": "Body Text",
    "styles": [
      {
        "class": "o-body--p1-primary",
        "text": "Body P1 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      },
      {
        "class": "o-body--p1-secondary",
        "text": "Body P1 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      },
      {
        "class": "o-body--p2-primary",
        "text": "Body P2 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      },
      {
        "class": "o-body--p2-secondary",
        "text": "Body P2 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      }
    ]
  },
  "captions": {
    "category": "Captions",
    "styles": [
      {
        "class": "o-caption--primary-caption1",
        "text": "Caption 1 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      },
      {
        "class": "o-caption--secondary-caption1",
        "text": "Caption 1 - Secondary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      },
      {
        "class": "o-caption--primary-caption2",
        "text": "Caption 2 - Primary. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      }
    ]
  },
  "details": {
    "category": "UI Details",
    "styles": [
      {
        "class": "o-detail--1",
        "text": "UI Detail 1"
      },
      {
        "class": "o-detail--2",
        "text": "UI Detail 2"
      },
      {
        "class": "o-detail--3",
        "text": "UI Detail 3"
      },
      {
        "class": "o-detail--4",
        "text": "UI Detail 4"
      },
      {
        "class": "o-detail--5",
        "text": "UI Detail 5"
      },
      {
        "class": "o-detail--6",
        "text": "UI Detail 6"
      },
      {
        "class": "o-detail--7",
        "text": "UI Detail 7"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------ *\
  $HEADING EXAMPLES
\* ------------------------------------ */

.typography-examples {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-md);
}

.typography-category__title {
  @extend .o-detail--5;
  padding: var(--ds-space-md);
  background-color: var(--ds-color-gray-102);
  margin-top: var(--ds-space-md);
}

.typography-example {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-sm);

  &__label {
    @extend .o-detail--6;
    display: inline-block;
    border-radius: var(--ds-border-radius-round);
    background-color: var(--ds-color-gray-101);
    padding: var(--ds-space-xxs) var(--ds-space-sm);
    color: var(--ds-color-gray-105);
  }
}
  • URL: /components/raw/typography-styles/_typography-styles.scss
  • Filesystem Path: components/01-atoms/text/typography-styles/_typography-styles.scss
  • Size: 755 Bytes
  • Handle: @typography-styles
  • Preview:
  • Filesystem Path: components/01-atoms/text/typography-styles/typography-styles.twig

No notes defined.