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.
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>
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>
.
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.
<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>
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.
<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>
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.
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>
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
- 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>
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.
(ノ゜Д゜)ノ ︵ ┻━┻
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
components/atoms/grouping/_grouping.scss
, line 128