uktrade/directory-components

{% extends 'demo/base.html' %}

{% load static %}
{% load demo_tags %}
{% load breadcrumbs from directory_components %}

{% block content %}

<div class="container">
  {% breadcrumbs 'Responsive classes' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>

<section class="padding-top-30">
  <div class="container">
    <h1 class="heading-xlarge">Responsive classes</h1>
    <p>All classes are mobile first.</p>
  </div>
</section>

<section class="background-stone-30">
  <div class="container">

    <h2 class="heading-large">Grid</h2>
    <p class="width-two-thirds">By default all column classes collapse to <code>.column-full</code> on mobile. Using multiple columns in a mobile layout is not recommended.</p>

    <h3 class="heading-medium">.grid-row</h3>
    <div class="grid-row">
      <div class="column-third-m column-half-l column-quarter-xl">
        {% include 'directory_components/card.html' with html_content='<p>column-third-m</p><p>column-half-l</p><p>column-quarter-xl</p>' %}
      </div>
      <div class="column-half-xl column-quarter-l column-third">
        {% include 'directory_components/card.html' with html_content='<p>column-half-xl</p><p>column-quarter-l</p><p>column-third</p>' %}
      </div>
      <div class="column-quarter">
        {% include 'directory_components/card.html' with html_content='<p>column-quarter</p>' %}
      </div>
    </div>
    <div class="grid-row">
      <div class="column-five-twelfths-m column-five-twelfths-1 column-five-twelfths-xl ">
        {% include 'directory_components/card.html' with html_content='<p>column-five-twelfths-m</p></p><p>column-five-twelfths-l</p><p>column-five-twelfths-xl</p>' %}
      </div>
      <div class="column-seven-twelfths-xl column-seven-twelfths-l column-seven-twelfths-m">
        {% include 'directory_components/card.html' with html_content='<p>column-seven-twelfths-m</p><p>column-seven-twelfths-l</p><p>column-seven-twelfths-xl</p>' %}
      </div>
    </div>

    <h3 class="heading-medium">.flex-grid</h3>
    <div class="flex-grid">
      <div class="column-third-m column-half-l column-quarter-xl">
        {% include 'directory_components/card.html' with html_content='<p>column-third-m</p><p>column-half-l</p><p>column-quarter-xl</p>' %}
      </div>
      <div class="column-third-m column-half-l column-quarter-xl">
        {% include 'directory_components/card.html' with html_content='<p>column-third-m</p><p>column-half-l</p><p>column-quarter-xl</p>' %}
      </div>
      <div class="column-third-m column-half-l column-quarter-xl">
        {% include 'directory_components/card.html' with html_content='<p>column-third-m</p><p>column-half-l</p><p>column-quarter-xl</p>' %}
      </div>
      <div class="column-third-m column-half-l column-quarter-xl">
        {% include 'directory_components/card.html' with html_content='<p>column-third-m</p><p>column-half-l</p><p>column-quarter-xl</p>' %}
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <h2 class="heading-large">Other responsive clases</h2>

    <p id="list-description" class="margin-top-30">Add the following suffixes to apply the styles below only to specific screen sizes:</p>

    <dl aria-labelledby="list-description">
      <dt class="heading-small">Tablet and up</dt>
      <dt class="margin-left-15"><code>-m</code></dt>
      <dt class="heading-small">Desktop and up</dt>
      <dt class="margin-left-15"><code>-l</code></dt>
      <dt class="heading-small">Extra large screens</dt>
      <dt class="margin-left-15"><code>-xl</code></dt>
    </dl>

    <h3 class="heading-medium">Padding and margin</h3>

    <div class="flex-grid">
      <div class="column-half padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-90 padding-90">.margin-90 .padding-90</h4>
        </div>
      </div>
      <div class="column-half padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-60 padding-60">.margin-60 .padding-60</h4>
        </div>
      </div>
    </div>
    <div class="flex-grid">
      <div class="column-half padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-45 padding-45">.margin-45 .padding-45</h4>
        </div>
      </div>
      <div class="column-quarter padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-30 padding-30">.margin-30 .padding-30</h4>
        </div>
      </div>
      <div class="column-quarter padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-15 padding-15">.margin-15 .padding-15</h4>
        </div>
      </div>
    </div>
    <div class="flex-grid">
      <div class="column-quarter padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto">
          <h4 class="heading-small background-stone margin-0 padding-0">.margin-0 .padding-0</h4>
        </div>
      </div>
      <div class="column-quarter padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto padding-30">
          <h4 class="heading-small background-stone margin-top-negative-15">.margin-top-negative-15</h4>
        </div>
      </div>
      <div class="column-half padding-bottom-15">
        <div class="background-stone-30 border-stone border-thin overflow-auto padding-30">
          <h4 class="heading-small background-stone margin-top-negative-30">.margin-top-negative-30</h4>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}