Typography contains default styles of headings semantic text list etc.

Headings#

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px

H6 Heading 16px

<h1>H1 Heading</h1>
<h1 class="h1">H1 Heading</h1>
<h2 class="h2">H2 Heading</h2>
<span class="h2">H2 Heading</span>
<div class="h3">H3 Heading</div>

Parapraphs#

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Quotes#

Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking.

- Steve Jobs

<blockquote>
  <p>Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking.</p>
  <cite>- Steve Jobs</cite>
</blockquote>

Address#

<address>
  <div>Green Office</div><br />
  <div>1-1 Alpha, Beta, Somewhere</div><br />
</address>

Semantic elements#

Code#

<!-- code snippets -->
F12
<p>This is an example</p>
<a>This is an example</a>
<span>This is an example</span>
<b>This is an example</b>
    

Lists#

<!-- Unordered list -->
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>List Item 1
    <ol>
      <li>List Sub-Item 1</li>
      <ol>
        <li>List Sub-Item 1</li>
      </ol>
    </ol>
  </li>
</ol>

<!-- Description List -->
<dl>
  <dt>Item 1</dt>
  <dd>Description for Item 1</dd>
</dl>