Texts

Component dedicated to font variations on texts

Responsive

Every modifier of txt component is responsive, which means that every features can be applied on specified screen sizes.

The following example shows an HTML element onto which MODIFIER_NAME is applied on SCREEN_SIZE_NAME

<HTMLTag class="c-txt m-[MODIFIER_NAME]--[SCREEN_SIZE_NAME]"></HTMLTag>

The following example shows an HTML element onto which MODIFIER_NAME is applied on multiple screen sizes through attribute.

<HTMLTag class="c-txt" m-[MODIFIER_NAME]="[SCREEN_SIZE_1], [SCREEN_SIZE_2], [SCREEN_SIZE_3]"></HTMLTag>

Similar to

<HTMLTag class="c-txt m-[MODIFIER_NAME]--[SCREEN_SIZE_1] m-[MODIFIER_NAME]--[SCREEN_SIZE_2] m-[MODIFIER_NAME]--[SCREEN_SIZE_3]"></HTMLTag>

<!-- Responsive classes -->
<div class="c-txt m-fs-3--xs">Font size token 3 on xs screen size</div>
<!-- Shorthand -->
<div class="c-txt" m-fs-3="xs">Font size token 3 on xs screen size</div>
<!-- Shorthand -->
<div class="c-txt" m-fs-3="xs,sm">Font size token 3 on xs and sm screen sizes</div>
<!-- DEMO ONLY -->
<style>
    body { 
        background-color: var(--goafe-color-support-success-500);
        padding: 1em;
    }
    div { 
        background-color: var(--goafe-color-neutral-900);
        margin-bottom: 1em;
    }

</style>

Text align modifier

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

<p class="c-txt m-ta-left">m-ta-left</p>
<p class="c-txt m-ta-center">m-ta-center</p>
<p class="c-txt m-ta-right">m-ta-right</p>
<p class="c-txt m-ta-justify">m-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 ONLY */
    body { padding: 20px; }
    .c-txt { border: 1px dotted #333; }
</style>

Font size modifier

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

<p class="c-txt m-fs-15">m-fs-15</p>
<p class="c-txt m-fs-14">m-fs-14</p>
<p class="c-txt m-fs-13">m-fs-13</p>
<p class="c-txt m-fs-12">m-fs-12</p>
<p class="c-txt m-fs-11">m-fs-11</p>
<p class="c-txt m-fs-10">m-fs-10</p>
<p class="c-txt m-fs-9">m-fs-9</p>
<p class="c-txt m-fs-8">m-fs-8</p>
<p class="c-txt m-fs-7">m-fs-7</p>
<p class="c-txt m-fs-6">m-fs-6</p>
<p class="c-txt m-fs-5">m-fs-5</p>
<p class="c-txt m-fs-4">m-fs-4</p>
<p class="c-txt m-fs-3">m-fs-3</p>
<p class="c-txt m-fs-2">m-fs-2</p>
<p class="c-txt m-fs-1">m-fs-1</p>
<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    .c-txt { border: 1px dotted #333; }
</style>

Font family modifier

This modifier affects font-family CSS property.

<p class="c-txt m-ff-lead-800">m-ff-lead-800</p>
<p class="c-txt m-ff-lead-700">m-ff-lead-700</p>
<p class="c-txt m-ff-lead-500">m-ff-lead-500</p>
<p class="c-txt m-ff-lead-400">m-ff-lead-400</p>

<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    .c-txt { border: 1px dotted #333; }
</style>

Line height modifier

Adjusts line-height property based on em unit.

<p>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="c-txt m-lh-1">m-lh-1 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="c-txt m-lh-1_3">m-lh-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>

<p class="c-txt m-lh-1_4">m-lh-4 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="c-txt m-lh-1_5">m-lh-5 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="c-txt m-lh-1_6">m-lh-6 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 ONLY */
    body { padding: 20px; }
    .c-txt { max-width: 300px; margin: 10px auto; 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="c-txt m-ellipsis">m-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="c-txt m-ellipsis-2">m-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="c-txt m-ellipsis-3">m-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 ONLY */
    body { padding: 20px; }
    .c-txt { max-width: 300px; margin: 10px auto; border: 1px dotted #333; }
</style>

Miscellaneous text styles modifiers

<p class="c-txt m-td-line-through">m-td-line-through</p>
<p class="c-txt m-td-underline">m-td-underline</p>
<p><a href="#" class="c-txt m-td-none">m-td-none</a></p>
<p class="c-txt m-tt-uppercase">to upper case</p>
<p class="c-txt m-tt-lowercase">TO LOWER CASE</p>
<p class="c-txt m-ws-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="c-txt m-bold">m-bold font-weight: bold</p>
<p class="c-txt m-italic">m-italic font-style: italic</p>
<p class="c-txt m-ls-0_25">m-ls-0_25 letter-spacing: 0.25em</p>
<p>
    <span class="c-txt m-va-top">m-va-top</span> 
    <span class="c-txt m-va-middle">m-va-middle</span> 
    <span class="c-txt m-va-bottom">m-va-bottom</span>
    <span class="c-txt m-va-baseline">m-va-baseline</span>
</p>
<p class="c-txt m-wb-break-word" style="width:50px">LKJsdfkhqsfkhqjKTYTRZdjhgfgfFGdjjdJGFDjfgd</p>
<style>
    /* DEMO ONLY */
    body { padding: 20px; }
    p { border: 1px dotted #333; }
</style>