<p class="display"><strong>Display Text: </strong>wird immer dann verwendet, wenn innerhalb
    von Komponenten Paragraph Text eingesetzt, aber eine serifenlose Schrift
    angezeigt werden soll.</p>
<p class="display">
    <strong>Display Text: </strong>
    wird immer dann verwendet, wenn innerhalb von Komponenten Paragraph Text eingesetzt, aber eine serifenlose Schrift angezeigt werden soll.
</p>
{
  "text": "Cupcake ipsum dolor sit amet. Jelly beans halvah sesame snaps cupcake cake gummies biscuit jelly-o. Cotton candy gummi bears cupcake bonbon tootsie roll candy canes sesame snaps."
}
  • Content:
    p {
      @extend %body-font-regular;
      margin-top: 0;
      margin-bottom: $content-spacer-base;
      line-height: $paragraph-line-height-small;
      font-size: $paragraph-font-size-small;
    
      &:not([class]) {
        hyphens: auto;
      }
    
      &.lead {
        @extend %body-font-italic;
        line-height: $paragraph-lead-line-height-small;
        font-size: $paragraph-lead-font-size-small;
      }
    
      &.display,
      &.standalone {
        @extend %heading-font-regular;
        margin-bottom: 0;
        line-height: $paragraph-line-height-small;
        font-size: $paragraph-font-size-small;
      }
    
      &.display {
        text-transform: uppercase;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      p {
        line-height: $paragraph-line-height;
        font-size: $paragraph-font-size;
    
        &.lead {
          line-height: $paragraph-lead-line-height;
          font-size: $paragraph-lead-font-size;
        }
      }
    }
    
  • URL: /components/raw/paragraph/_paragraph.scss
  • Filesystem Path: components/01-atoms/text/block/paragraph/_paragraph.scss
  • Size: 856 Bytes

There are no notes for this item.