{% extends 'layouts/lab-side-content.html' %}

{% from 'macros/lab-example.html' import LabExample %}
{% from 'macros/lab-code.html' import LabCode %}

{% set pageType = "content" %}
{% set pageId = "typography" %}

{% block content %}
  <h1>Typography</h1>

  <h3>Headings</h3>

  {{LabExample(pageType, pageId, 'headings')}}
  {{LabCode('html', '
  <h1 class="u-canon">...</h1>

  <h1>...</h1>

  <h2>...</h2>

  <h3>...</h3>

  <h4>...</h4>

  <h5>...</h5>

  <h6>...</h6>
  ')}}

  <h3>Text</h3>

  {{LabExample(pageType, pageId, 'text')}}
  {{LabCode('html', '
  <p class="u-brevier">...</p>

  <p class="u-minion">...</p>

  <p class="u-body-copy">...</p>

  <p>
    <a href="#">...</a>
  </p>
  ')}}

  <h3>Lists</h3>

  {{LabExample(pageType, pageId, 'lists')}}
  {{LabCode('html', '
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
  </ul>

  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
  </ul>

  <blockquote>
    <p>...</p>
    <cite>...</cite>
  </blockquote>
  ')}}

  <h3>Blockquote</h3>

  {{LabExample(pageType, pageId, 'blockquote')}}
  {{LabCode('html', '
  <blockquote>
    <p>...</p>
    <cite>...</cite>
  </blockquote>
  ')}}
{% endblock %}