Davidson Styleguide

P 

<!-- Default -->
<p class="">
    <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
</p>


<!-- Intro -->
<p class="intro">
    Intro text is larger than standard paragraph text and should be pretty short.
</p>


<!-- Helper Text -->
<p class="helper">
    Helper text is brief, easy to spot, but not intrusive.
</p>


{% if p is not empty %}
<p class="{{ p.variant }}">
  {{ p.content }}
</p>
{% endif %}
 
/* Default */
{
  "p": {
    "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
  }
}


/* Intro */
{
  "p": {
    "content": "Intro text is larger than standard paragraph text and should be pretty short.",
    "variant": "intro"
  }
}


/* Helper Text */
{
  "p": {
    "content": "Helper text is brief, easy to spot, but not intrusive.",
    "variant": "helper"
  }
}
  • Content: 
    p {
  @include rr-font-compute(r, medium);
  margin-top: 0;
  margin-bottom: rr-gridbase(2);
}

//sass-lint:disable no-qualifying-elements

p.intro {
  @include rr-font-compute(2xl, medium);
  font-family: $font-rubik;
}

// Introduction components are slightly larger than
// the introduction text style used in wysiwygs.
.intro p {
  // @include rr-font-compute(4xl, medium);
  font-size: rem(32px);
  line-height: rem(40px);
  font-family: $font-rubik;
}

p.helper,
.helper p {
  color: color(gray-dark);
  font-weight: bold;
}
  • URL: /components/raw/p/p.scss
  • Filesystem Path: patterns/atoms/text/p/p.scss
  • Size: 530 Bytes

A paragraph is a basic tag that is wrapped around blocks of text or paragraphs in an article.

The intro style is a larger, bolder option for paragraphs that can be used to introduce a page or section.