Living Styleguide

Paragraph: Default 

<p>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.</p>
 
<p>{context.text}</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.