2.1.1 base.grouping.p Body copy

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a top and bottom margin.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p class="">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.</p>

<p class="">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

<p class="">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.</p>
Source: components/atoms/grouping/_grouping.scss, line 108

2.1.2 base.grouping.blockquote Grouping elements Block quotes

Grouping elements Block quotes

The <blockquote> element is for quoting blocks of content from another source within your document. Wrap the <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Optionally, add a <footer> to identify the source of the quote, wrapping the name of the source work in <cite>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

J. Smith in Source Title
<blockquote class="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
  erat a ante.</p>
</blockquote>

<blockquote class="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
  erat a ante.</p>
  <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
  Title</cite></footer>
</blockquote>
Source: components/atoms/grouping/_grouping.scss, line 1

2.1.3 base.grouping.figure Figures

The <figure> element can be used to annotate illustrations, diagrams, photos, code listings, etc.

Optionally, a <figcaption> element inside the <figure> represents the caption of the figure.

Example
An illustration, diagram, photo, code listing, etc.

A generic square placeholder image.
A caption for the above image.

A generic square placeholder image.
A caption for the above image.
<figure class="">
  An illustration, diagram, photo, code listing, etc.
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150/" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
Source: components/atoms/grouping/_grouping.scss, line 82

2.1.4 base.grouping.hr Horizontal rule

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.</p>

<hr class="">

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
Source: components/atoms/grouping/_grouping.scss, line 97

2.1.5.1 base.grouping.lists.dl Lists

Style guide: base.grouping.lists Unordered list

The <ul> element is a list of items in which the order does not explicitly matter.

Style guide: base.grouping.lists.ul Ordered list

The <ol> element is a list of items in which the order does explicitly matter.

Markup: grouping-ol.twig

Style guide: base.grouping.lists.ol Description list

The <dl> element is a list of terms with their associated descriptions.

Markup: grouping-dl.twig

Weight: 1

Example
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul class="">
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
Source: components/atoms/grouping/_grouping.scss, line 20

2.1.6 base.grouping.pre Preformatted text

The <pre> element represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.

Example
The following text is preformatted:
(ノ゜Д゜)ノ ︵ ┻━┻
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
Source: components/atoms/grouping/_grouping.scss, line 128