Paragraph: Display 

<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.