Greenwire typography

Headings

Article titles are generated from a separate field in Drupal. They are often accompanied with icons to highlight the content type. Therefore it is not advised to use <h1> elements in the body copy.

This is an heading 1 element

This is an heading 2 element

This is an heading 3 element

This is an heading 4 element

This is an heading 5 element

This is an heading 6 element

  <article>
    <h1> This is an heading 1 element </h1>
    <h2> This is an heading 2 element </h2>
    <h3> This is an heading 3 element </h3>
    <h4> This is an heading 4 element </h4>
    <h5> This is an heading 5 element </h5>
    <h6> This is an heading 6 element </h6>
  </article>

Body copy

The default font-size is 0.875rem with a line-height of 1.5em. This is applied on the <body> Paragraphs inherit this style. Inside an <article> they receive an extra top and bottom margin.

Nullam ultricies tellus eget pretium faucibus. Vestibulum in tellus non urna consequat pharetra ut eget purus.

  <article>
    <p> Nullam ultricies tellus eget pretium faucibus. Vestibulum in tellus non urna consequat pharetra ut eget purus.</p>
  </article>

Inline text elements

The following elements can be used across the site and are not limited not any parent selector.

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

This line of text will render as underlined

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

This line of text is rendered as bold text.

This line of text is rendered as italicized text.

^{This line of text is rendered as superscript text.}

_{This line of text is rendered as subscript text.}

  <s>This line of text is meant to be treated as no longer accurate.</s>
  <u>This line of text will render as underlined</u>
  <small>This line of text is meant to be treated as fine print.</small>
  <strong>This line of text is rendered as bold text.</strong>
  <i>This line of text is rendered as italicized text.</i>
  <sup>This line of text is rendered as superscript text.</sup>
  <sub>This line of text is rendered as subscript text.</sub>

Lists

By default lists are unstyled. This is because there are many other components who use this markup and ed to display like something else. To get a proper list styling make sure it is placed in a <article>.

Unordered list

unordered list item one
unordered list item two
unordered list item three
- subitem 1
- subitem 2
- subitem 3
unordered list item four
unordered list item five

Ordered list

ordered list item one
ordered list item two
ordered list item three
- unordered list item
- second unordered list item
ordered list item four
ordered list item five
1. ordered subitem
2. second ordered subitem

  <article>

    <h4>Unordered list</h4>

    <ul>
      <li>unordered list item one</li>
      <li>unordered list item two</li>
      <li>
        unordered list item three
        <ul>
          <li>subitem 1</li>
          <li>subitem 2</li>
          <li>subitem 3</li>
        </ul>
      </li>
      <li>unordered list item four</li>
      <li>unordered list item five</li>
    </ul>

    <h4>Ordered list</h4>

    <ol>
      <li>ordered list item one</li>
      <li>ordered list item two</li>
      <li>
        ordered list item three
        <ul>
          <li>unordered list item</li>
          <li>second unordered list item</li>
        </ul>
      </li>
      <li>ordered list item four</li>
      <li>
        ordered list item five
        <ol>
          <li>ordered subitem</li>
          <li>second ordered subitem</li>
        </ol>
      </li>
    </ol>
  </article>

Quote

Blockquotes can be used to quote people and style this consistently.

This project aims at making sure your style sheets are fully documented whilst being synchronized th your webpages styles. To do this it actually uses your live stylesheets in so that at anytime u can review how your styleguide looks.

  <article>
    <blockquote cite="http://linktosource.com">
      <q>This project aims at making sure your style sheets are fully documented whilst being synchronized th your webpages styles. To do this it actually uses your live stylesheets in so that at anytime u can review how your styleguide looks.</q>
    </blockquote>
  </article>

Links

Links inside .content class (except .button and .item-list) have the next properties:

:visited When the link is visited, it keeps the color and has no decoration.
:hover When the link is hovered, the cursor became a pointer and the link is underlined.
:focus When the link is focused, the link is underlined and with a thin dotted outline.

This is a link element

  <article>
    <a href="#" title="link title"> This is an link element </a>
  </article>