<p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at ullamcorper nisi, id ullamcorper leo. Fusce eleifend, orci eleifend pulvinar posuere, ex nibh bibendum felis, vitae mattis nibh purus at diam. Maecenas facilisis
    lorem ac mi congue, vel hendrerit purus gravida. Morbi diam eros, congue vitae sem eu, tincidunt sagittis lacus.</p>

<p class="type-s">This is a small paragraph.</p>
<p class="type-m">This is a medium paragraph.</p>
<p class="type-base">This is a base paragraph.</p>
<p class="type-l">This is a large paragraph.</p>
<p class="type-xl">This is an extra large paragraph.</p>
<p class="type-xxl">This is an xxl paragraph.</p>

<p>This paragraph contains <a href="https://google.com">an inline link</a>.</p>
<p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at ullamcorper nisi, id ullamcorper leo. Fusce eleifend, orci eleifend pulvinar posuere, ex nibh bibendum felis, vitae mattis nibh purus at diam. Maecenas facilisis lorem ac mi congue, vel hendrerit purus gravida. Morbi diam eros, congue vitae sem eu, tincidunt sagittis lacus.</p>

<p class="type-s">This is a small paragraph.</p>
<p class="type-m">This is a medium paragraph.</p>
<p class="type-base">This is a base paragraph.</p>
<p class="type-l">This is a large paragraph.</p>
<p class="type-xl">This is an extra large paragraph.</p>
<p class="type-xxl">This is an xxl paragraph.</p>

<p>This paragraph contains <a href="https://google.com">an inline link</a>.</p>
/* No context defined for this component. */
  • Content:
    .type-s {
       @include font-scale(s, helvetica);
    }
    
    .type-m {
       @include font-scale(m, helvetica);
    }
    
    .type-base {
       @include font-scale(base, helvetica);
    }
    
    .type-l {
       @include font-scale(l, helvetica);
    }
    
    .type-xl {
       @include font-scale(xl, helvetica);
    }
    
    .type-xxl {
       @include font-scale(xxl, helvetica);
    }
    
  • URL: /components/raw/defaults/defaults.scss
  • Filesystem Path: src/components/01-type/01-defaults/defaults.scss
  • Size: 317 Bytes

Type Notes

The type ‘t-shirt sizes’ are defined in _config.scss as a Sass Map. These are then calculated as rem units with a pixel fallback.