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

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

{% set pageType = "layouts" %}
{% set pageId = "container" %}

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

  <h3>Usage</h3>

  {{LabCode('html', '
  <div class="o-container">...</div>

  <div class="o-container o-container--centered">...</div>

  <div class="o-container o-container--thin">...</div>

  <div class="o-container o-container--fluid">...</div>

  <div class="o-container o-container--collapse">...</div>
  ')}}

  <h4>Sidebar</h4>

  {{LabCode('html', '
  <div class="o-container">
    <div class="o-container o-container--sidebar">...</div>
    <div class="o-container o-container--body">...</div>
  </div>
  ')}}
{% endblock %}