{# -------- STYLEGUIDE SECTION --------- 4. Typography ------------------------------------- #} {% include 'styleguide/section/partial/section-heading.html' with { title: '4. Typography' } only %} {# -------------------------------------- #} {# -------------------------------------- Headings ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Headings', description: 'All heading styles, <h1> through <h6>.', exampleCode: '

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
', } only %} {# -------------------------------------- Body Copy ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Body Copy', description: 'Default body copy font-size is 16px and is applied to the <body> and all <p> elements.', exampleCode: '

This is a single line of body copy.

This body copy spans multiple lines. Est delectus minima cupiditate explicabo molestiae alias culpa dolores, nisi quasi a quam minus. Error perspiciatis, dolor rem harum excepturi natus facere reprehenderit deserunt. Quas architecto magni eius voluptatum quos, aperiam modi accusantium quaerat illo repellendus expedita, rem voluptas at assumenda natus quo nisi repellat asperiores porro recusandae doloribus quae.

', subsections: [ { heading: 'Lead Body Copy', description: 'Make a paragraph stand out from the rest.', exampleCode: '

This is a single line of lead body copy.

This body lead copy spans multiple lines. Est delectus minima cupiditate explicabo molestiae alias culpa dolores, nisi quasi a quam minus. Error perspiciatis, dolor rem harum excepturi natus facere reprehenderit deserunt.

' } ], } only %} {# -------------------------------------- Links ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Links', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, nisi.', exampleCode: '

Click here for Google.

', } only %} {# -------------------------------------- Inline Text Elements ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Inline Text Elements', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, quasi.', subsections: [ { heading: 'Marked Text', description: 'For highlighting a run of text due to its relevance in another context, use the <mark> tag.', exampleCode: '

You can use the mark tag to highlight text.

' }, { heading: 'Deleted Text', description: 'For indicating blocks of text that have been deleted use the <del> tag.', exampleCode: '

This line of text is meant to be treated as deleted text.

' }, { heading: 'Strikethrough Text', description: 'For indicating blocks of text that are no longer relevant use the <s> tag.', exampleCode: '

This line of text is meant to be treated as no longer accurate.

' }, { heading: 'Inserted Text', description: 'For indicating additions to the document use the <ins> tag.', exampleCode: '

This line of text is meant to be treated as an addition to the document.

' }, { heading: 'Underlined Text', description: 'To underline text use the <u> tag.', exampleCode: '

This line of text will render as underlined

' }, { heading: 'Small Text', description: 'For de-emphasizing inline or blocks of text, use the <small> tag', exampleCode: '

This line of text is meant to be treated as fine print.

' }, { heading: 'Bold Text', description: 'For emphasizing a snippet of text with a heavier font-weight.', exampleCode: '

rendered as bold text

' }, { heading: 'Italic Text', description: 'For emphasizing a snippet of text with italics.', exampleCode: '

rendered as italicized text

' }, { heading: 'Abbreviated Text', description: "Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.", exampleCode: '

CD

' }, { heading: 'Cited Text', description: 'Use the <cite> to attribute a source.', exampleCode: '

Source Title

' }, ], } only %} {# -------------------------------------- Address ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Address', description: 'Present contact information for the nearest ancestor or the entire body of work.', exampleCode: '
Mr. Example
555 Orange Road
San Diego, CA 55555
P: (555) 555-5555
', } only %} {# -------------------------------------- Blockquotes ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Blockquotes', description: 'For quoting blocks of content from another source within your document.', exampleCode: '

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

', subsections: [ { heading: 'Naming a source', descriptiom: 'Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.', exampleCode: '

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

Someone famous in Source Title
' } ], } only %} {# -------------------------------------- Lists ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Lists', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, commodi!', subsections: [ { heading: 'Unordered', descriptiom: 'A list of items in which the order does not explicitly matter.', exampleCode: '' }, { heading: 'Ordered', descriptiom: 'A list of items in which the order does explicitly matter.', exampleCode: '
  1. Lorem ipsum dolor sit amet.
    1. Subitem
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor.
' }, { heading: 'Unstyled', descriptiom: 'Remove default list styling.', exampleCode: '' }, { heading: 'Inline', descriptiom: 'Place all list items on a single line.', exampleCode: '' }, { heading: 'Condensed', descriptiom: 'Place all list items on a single line.', exampleCode: '
  1. Item 1
  2. Item 2
  3. Item 3
' }, ], } only %} {# -------------------------------------- Description ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Description', description: 'A list of terms with their associated descriptions.', exampleCode: '
Term 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, qui.
Term 2
Lorem ipsum dolor sit amet, consectetur adipisicing.
Term 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus architecto expedita, rerum.
', subsections: [ { heading: 'Horizontal Description', descriptiom: 'Make terms and descriptions line up side-by-side.', exampleCode: '
Term 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, qui.
Term 2
Lorem ipsum dolor sit amet, consectetur adipisicing.
Really, really long overflowing Item
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus architecto expedita, rerum.
' }, ], } only %} {# -------------------------------------- Dividers ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Dividers', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, possimus.', subsections: [ { heading: 'Default', description: 'Your standard everyday divider.', exampleCode: '
' } ] } only %}
{# .sg-container #}
{# .sg-section #}