Penguin

Text

Styles for all of the most basic typographical elements. Remeber to use all the elements inside the .text wrapper.

<div class="text">
    <!-- Place here the html element -->
</div>

##heading

Class name HTML
.h1 <h1 class="h1">This is a h1 text</h1>
.h2 <h2 class="h2">This is a h2 text</h2>
.h3 <h3 class="h3">This is a h3 text</h3>
.h4 <h4 class="h4">This is a h4 text</h4>
.h5 <h5 class="h5">This is a h5 text</h5>
.h6 <h6 class="h6">This is a h6 text</h6>

This is a h3 text with .h1 style

<h3 class="h1">This is a h3 text with .h1 style</h3>

This is a h1 text

This is a h2 text

This is a h3 text

This is a h4 text

This is a h5 text
This is a h6 text
<div class="text">
    <h1>This is a h1 text</h1>
    <h2>This is a h2 text</h2>
    <h3>This is a h3 text</h3>
    <h4>This is a h4 text</h4>
    <h5>This is a h5 text</h5>
    <h6>This is a h6 text</h6>
</div>

##paragraphs

Default paragraph

This is a large text

Default paragraph with a heavier font-weight

Default paragraph with a snippet of text with italics

This is a small text

This is a small label

<div class="text">
    <p>Default paragraph</p>
    <p class="text-large">This is a large text</p>
    <p>Default paragraph with a <strong>heavier font-weight</strong></p>
    <p>Default paragraph with a <em>snippet of text with italics</em></p>
    <p class="text-small">This is a small text</p>
    <p class="text"><small>This is a small label</small></p>
</div>
Element HTML
p <p>Default paragraph</p>
p.text-large <p class="text-large">This is a large text</p>
strong <p>Default paragraph with a heavier font-weight</p>
em <p>Default paragraph with a snippet of text with italics</p>
p.text-small <p class="text-small">This is a small text</p>
p.text small <p class="text">This is a small text</p>

##lists

  • A
  • B
  • C
    • C1
    • C2
  • D
  1. one
  2. two
  3. three
  4. four
Term A:
Definition A
Term B:
Definition B
Term C:
  • Definition C1
  • Definition C2
    1. Definition C3.1
    2. Definition C3.2
<div class="text">
    <ul>
        <li>A</li>
        <li>B</li>
        <li>
            <strong>C</strong>
            <ul>
                <li>C1</li>
                <li>C2</li>
            </ul>
        </li>
        <li>D</li>
    </ul>
    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ol>
    <dl>
        <dt><strong>Term A:</strong></dt>
            <dd>Definition A</dd>
        <dt><strong>Term B:</strong></dt>
            <dd>Definition B</dd>
        <dt><strong>Term C:</strong></dt>
            <dd>
                <ul>
                    <li>Definition C1</li>
                    <li>Definition C2</li>
                    <li>
                        <ol>
                            <li>Definition C3.1</li>
                            <li>Definition C3.2</li>
                        </ol>
                    </li>
                </ul>
            </dd>
    </dl>
</div>