{% extends "templates/one-column.html" %}

{% block title %}ubuntu.com documentation{% endblock %}

{% block head_extra %}
<meta name="robots" content="noindex, nofollow">
{% endblock %}
{% block content %}

<section class="p-strip--suru is-dark is-deep">
  <div class="row">
    <div class="col-8">
      <h1>ubuntu.com documentation</h1>
      <p>
        Help and guides for design patterns used on the ubuntu.com website.
      </p>
    </div>
  </div>
</section>

<section class="p-strip">
  <div class="row">
    <div class="col-8">
      <p>
        These pages were created to help designers and developers talk about html and css patterns on the site and help developers implement them consistently.
      </p>
    </div>
  </div>
  <div class="row u-equal-height">
    <div class="col-4 p-card">
      <h3 class="p-card__title">
        <a href="/0_docs/strips">Hero strips</a>
      </h3>
      <p class="p-card__content">
        Learn how to use suru strips that have been designed to be used on the header banners of each section of the website.
      </p>
    </div>
    <div class="col-4 p-card">
      <h3 class="p-card__title">
        <a href="/0_docs/takeovers">Takeovers</a>
      </h3>
      <p class="p-card__content">
        Get the code and see examples of the homepage takeovers.
      </p>
    </div>
    <div class="col-4 p-card">
      <h3 class="p-card__title">
        <a href="/0_docs/engage_pages">Engage pages</a>
      </h3>
      <p class="p-card__content">
        Get the code and learn how to use the new Markdown templates for our engage pages.
      </p>
    </div>
    <div class="col-4 p-card">
      <h3 class="p-card__title">
        <a href="/0_docs/content_strips">Content strips</a>
      </h3>
      <p class="p-card__content">
        Get the code and see examples of suru strips designed to highlight sections across the pages.
      </p>
    </div>
    <div class="col-4 p-card">
      <h3 class="p-card__title">
        <a href="/0_docs/takeover-archives">Takeover archives</a>
      </h3>
      <p class="p-card__content">
        See screenshots of the old takeovers.
      </p>
    </div>
  </div>
</section>

{% endblock content %}