<p class="display">
    Display Text wird immer dann verwendet, wenn innerhalb von Komponenten Paragraph Text eingesetzt, aber eine serifenlose Schrift angezeigt werden soll.
</p>
<p class="display">
    Display Text wird immer dann verwendet, wenn innerhalb von Komponenten Paragraph Text eingesetzt, aber eine serifenlose Schrift angezeigt werden soll.
</p>
{
  "text": "Hardwired professional deficiency BAMA quicksilver sanpaku cutting-edge cryptic dub aiming neon jack in. Ninsei fiberglass cybernetic bullshit shattered magnetic agency isotropic. Tokyo beam prosthesis corporate-grade laser-scrawled prosthesis. Japanese prototype microchannel synthetic shattered temperfoam run circuitry agency plastic intrusion précis biz."
}
  • Content:
    p {
      @extend %body-font-regular;
    
      font-size: $font-size-base;
      line-height: $paragraph-line-height;
      hyphens: auto;
      word-wrap: break-word;
      overflow-wrap: break-word;
      // hyphenate-limit-chars: 6 4 4;
      // hyphenate-limit-last: always;
      // hyphenate-limit-lines: 2;
      // TODO turn on when it's supported
      // see: http://clagnut.com/blog/2395
    
      &.lead {
        @extend %body-font-italic;
    
        font-size: $font-size-sm;
        line-height: $paragraph-line-height;
      }
    
      &.display,
      &.standalone {
        @extend %heading-font-regular;
      }
    
      &.display {
        text-transform: uppercase;
      }
    
      &.small {
        font-size: $font-size-xxs;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      p {
        font-size: $font-size-sm;
    
        &.lead {
          font-size: $font-size-md;
        }
      }
    }
    
  • URL: /components/raw/paragraph/_paragraph.scss
  • Filesystem Path: components/05-atoms/text/paragraph/_paragraph.scss
  • Size: 790 Bytes

No notes defined.