Texts

Component dedicated to font variations on texts

Responsive

This component is responsive, which means that every modifier may be applied using classes or shorthand attribute on specified screen sizes.

<!-- Design tokens with classes -->
<element class="[MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME1] [MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME2]"></element>
<!-- Example with uppercase modifier applied only on sm and md screen sizes -->
<div class="my-text mod-uppercase-sm mod-uppercase-md"></div>
<!-- Example with font size xxs modifier on sm screen size and uppercase modifier applied only on sm and md screen sizes -->
<div class="my-text mod-fs-xxs-sm mod-uppercase-sm mod-uppercase-md"></div>

<!-- Design tokens with attribute shorthand -->
<element [MOD_PREFIX]-[MOD_NAME]="[SCR_SIZE_NAME1],[SCR_SIZE_NAME2],etc"></element>
<!-- Example with uppercase modifier applied only on sm and md screen sizes -->
<div class="my-text" mod-uppercase="sm,md"></div>
<!-- Example with font size xxs modifier on sm screen size and uppercase modifier applied only on sm and md screen sizes -->
<div class="my-text" mod-fs-xxs="sm" mod-uppercase="sm,md"></div>

Text align modifier

Basic text alignment modifier. This modifier affects text-align CSS property.

<p class="my-text mod-ta-center">mod-ta-center</p>
<p class="my-text mod-ta-right">mod-ta-right</p>
<p class="my-text mod-ta-justify">mod-ta-justify Stet lorem stet duo amet dolor sadipscing at tempor. Eos labore takimata amet ipsum. Voluptua aliquyam clita elitr ut sea duo. At sadipscing ut eirmod accusam stet amet gubergren at. Eos labore takimata amet ipsum. Voluptua aliquyam clita elitr ut sea duo. At sadipscing ut eirmod accusam stet amet gubergren at.</p>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    .my-text { border: 1px dotted #333; }
</style>

Font size modifier

This modifier affects font-size and line-height CSS properties.

<p class="my-text mod-fs-xxs">mod-fs-xxs</p>
<p class="my-text mod-fs-xs">mod-fs-xs</p>
<p class="my-text mod-fs-sm3">mod-fs-sm3</p>
<p class="my-text mod-fs-sm2">mod-fs-sm2</p>
<p class="my-text mod-fs-sm">mod-fs-sm</p>
<p class="my-text mod-fs-md">mod-fs-md</p>
<p class="my-text mod-fs-lg">mod-fs-lg</p>
<p class="my-text mod-fs-lg2">mod-fs-lg2</p>
<p class="my-text mod-fs-lg3">mod-fs-lg3</p>
<p class="my-text mod-fs-xl">mod-fs-xl</p>
<p class="my-text mod-fs-xxl">mod-fs-xxl</p>
<style>
    /* DEMO ONY */
    body { padding: 20px; }
    .my-text { border: 1px dotted #333; }
</style>

Font family modifier

This modifier affects font-family CSS property.

<p class="my-text mod-ff-lead-bold-max">mod-ff-lead-bold-max</p>
<p class="my-text mod-ff-lead-bold-2">mod-ff-lead-bold-2</p>
<p class="my-text mod-ff-lead-bold-1">mod-ff-lead-bold-1</p>
<p class="my-text mod-ff-lead">mod-ff-lead</p>
<p class="my-text mod-ff-lead-light-min">mod-ff-lead-light-min</p>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    .my-text { border: 1px dotted #333; }
</style>

Text ellipsis modifier

Limits the amount of lines to 1, 2 or 3. Exceeding content is annotated with 3 points. This modifier affects the following CSS properties:

  • overflow
  • text-overflow
  • display
  • -webkit-box-orient
  • -webkit-line-clamp
<p class="my-text mod-ellipsis">mod-ellipsis Invidunt sed ut sea sadipscing no tempor kasd ut justo, est sit gubergren takimata et at aliquyam diam dolores. Elitr kasd eos amet ipsum gubergren diam no amet accusam. Ipsum.</p>
<p class="my-text mod-ellipsis-2">mod-ellipsis-2 Invidunt sed ut sea sadipscing no tempor kasd ut justo, est sit gubergren takimata et at aliquyam diam dolores. Elitr kasd eos amet ipsum gubergren diam no amet accusam. Ipsum.</p>
<p class="my-text mod-ellipsis-3">mod-ellipsis-3 Invidunt sed ut sea sadipscing no tempor kasd ut justo, est sit gubergren takimata et at aliquyam diam dolores. Elitr kasd eos amet ipsum gubergren diam no amet accusam. Ipsum.</p>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    .my-text { max-width: 300px; margin: 10px auto; border: 1px dotted #333; }
</style>

Miscellaneous text styles modifiers

<p><a href="#" class="my-text mod-td-none">mod-td-none</a></p>
<p class="my-text mod-uppercase">to upper case</p>
<p class="my-text mod-lowercase">TO LOWER CASE</p>
<p class="my-text mod-nowrap">No carriage return. Dolore sed amet eos nonumy diam vero rebum, ipsum dolore rebum voluptua sea erat ipsum magna, ea at labore lorem.</p>
<p class="my-text mod-bold">mod-bold font-weight: bold</p>
<p class="my-text mod-italic">mod-italic font-style: italic</p>

<style>
    /* DEMO ONY */
    body { padding: 20px; }
    p { border: 1px dotted #333; }
</style>

Reset modifier

These modifiers affects the following CSS properties:

  • text-decoration: none
  • font-variant: normal
  • font-style: normal
  • font-weight: normal
  • text-transform: none
  • white-space: normal
  • text-overflow: normal
<p class="my-text mod-uppercase mod-italic"><span class="my-text mod-reset">mod-reset</span></p>
<p class="my-text mod-uppercase mod-italic"><span class="my-text mod-normal">mod-normal</span></p>
<style>
    /* DEMO ONY */
    body { padding: 20px; }
    p { border: 1px dotted #333; }
</style>