{% extends "templates/one-column.html" %} {% block title %}Strips | ubuntu.com documentation{% endblock %} {% block head_extra %}{% endblock %} {% block content %}

Suru strips

p-strip--suru

This strip should only be used on overview/main pages and is meant to have an illustration on the right side.

{{ image(url="https://assets.ubuntu.com/v1/27b51b01-IOT_Ubuntu_devices_inforgrapic.svg", alt="", height="285", width="415", hi_def=True, loading="auto") | safe }} 
<section class="p-strip--suru is-dark is-deep">
  <div class="row u-vertically-center">
    <div class="col-6">
      <h1>
        <!-- title -->
                              </h1>
                              <p>
                                <!-- text -->
                              </p>
                            </div>
                            <div class="col-5 col-start-large-8 u-hide--medium u-hide--small u-align--center">
                              <!-- img -->
                            </div>
                          </div>
                  </section>

p-strip-suru-half-top

Second strip heading

This strip should only be used on overview/main pages and is meant to be followed by a light-grey section.

{{ image(url="https://assets.ubuntu.com/v1/6c0f3ca0-disco-dingo.svg", alt="", height="256", width="216", hi_def=True, loading="auto") | safe }} 

<section class="p-strip-suru-half-top">
  <div class="row">
    <div class="col-12">
      <h1>
        <-- first heading -->
                            </h1>
                          </div>
                        </div>
                      </section>
                      <section class="p-strip--light u-no-padding--top">
                        <div class="row u-vertically-center" style="position: relative; top: -2rem;" >
                          <div class="col-6">
                            <h2>
                              <-- second heading -->
                            </h2>
                            <p>
                              <-- text -->
                            </p>
                          </div>
                          <div class="col-6 u-hide--medium u-hide--small u-align--center">
                            <-- img -->
                          </div>
                        </div>
                      </section>

p-strip--suru-background

This strip should only be used on overview/main pages and expects the use of a background image.

CTA 


<section class="p-strip--image is-dark is-deep u-no-padding--top u-no-padding--bottom desktop-hero">
  <div class="p-strip--suru-background">
    <div class="row">
      <div class="col-6">
        <h1>
          <-- title -->
                                </h1>
                                <p>
                                  <-- text -->
                                </p>
                                <p>
                                  <a href="#" class="p-button--positive"><-- CTA --></a>
                                </p>
                              </div>
                            </div>
                          </div>
                        </section>

p-strip--suru-topped

This strip should be followed by a light-grey section or at least have a border to indicate a separation between the heading and the next section. 

<section class="p-strip is-bordered u-no-padding--top u-no-padding--bottom">
  <div class="p-strip--suru-topped">
    <div class="row">
      <div class="col-8">
        <h1>
          <!-- title -->
                                  </h1>
                                </div>
                              </div>
                            </div>
                    </section>

p-strip--suru-bottomed

Here the gradiant is on the bottom.

It can handle a fair bit of text.

And CTAs

{{ image(url="https://assets.ubuntu.com/v1/68703716-robot.svg", alt="", height="222", width="138", hi_def=True, loading="auto") | safe }} 

<section class="p-strip--suru-bottomed">
  <div class="row u-equal-height">
    <div class="col-7 u-vertically-center">
      <h1>
        <!-- title -->
                                      </h1>
                                      <h4>
                                        <!-- sub-title -->
                                      </h4>
                                      <p>
                                        <!-- text -->
                                      </p>
                                      <p>
                                        <a href="/" class="p-button--positive u-no-margin--bottom"><!-- CTA --></a>
                                      </p>
                                    </div>
                                    <div class="col-5 u-align--center u-vertically-center u-hide--medium u-hide--small">
                                      <!-- img -->
                                    </div>
                                  </div>
                                </section>

p-strip--suru-half-and-half

This strip can have an illustration on the right.

{{ image(url="https://assets.ubuntu.com/v1/c3b8a9dd-Snap_Store_shopping_icon.svg", alt="", height="218", width="250", hi_def=True, loading="auto") | safe }} 

<section class="p-strip u-no-padding--top u-no-padding--bottom">
  <div class="p-strip--suru-half-and-half">
    <div class="row u-equal-height">
      <div class="col-7">
        <h1>
          <-- title -->
                                            </h1>
                                            <p>
                                              <-- text -->
                                            </p>
                                          </div>
                                          <div class="col-5 u-align--center u-vertically-center u-hide--medium u-hide--small">
                                            <-- img -->
                                          </div>
                                        </div>
                                      </div>
                                    </section>

p-strip--suru-half-and-half-reversed - image

This strip has room for an image or an illustration.

Contact us

CTA ›

p-strip--suru-half-and-half-reversed - illustration

This strip has room for an image or an illustration.

{{ image(url="https://assets.ubuntu.com/v1/4e2131b0-3B-Embedded+Linux.svg", alt="", height="200", width="335", hi_def=True, loading="auto") | safe }} 

<section class="p-strip--suru-half-and-half-reversed is-dark">
  <div class="row u-equal-height u-vertically-center">
    <div class="col-6">
      <h1>
        <!-- title -->
                                              </h1>
                                              <p class="p-heading--4">
                                                <!-- sub-title -->
                                              </p>
                                            </div>
                                            <div class="col-6 u-hide--small u-align--right">
                                              <!-- img -->
                                            </div>
                                          </div>
                                        </section>

p-strip--suru-image

An image or illustration can be used on the right. It also requires a fair bit of height to look correct.

{{ image(url="https://assets.ubuntu.com/v1/2c3ad93c-digital-signage-2.png", alt="", height="262", width="415", hi_def=True, loading="auto") | safe }} 

<section class="p-strip is-deep is-bordered u-no-padding--top u-no-padding--bottom">
  <div class="p-strip--suru-image">
    <div class="row u-equal-height">
      <div class="col-7">
        <h1>
          <-- title -->
                                                    </h1>
                                                    <p>
                                                      <-- text -->
                                                    </p>
                                                  </div>
                                                  <div class="col-5 u-vertically-center u-hide--medium u-hide--small u-align--center">
                                                    <-- img -->
                                                  </div>
                                                </div>
                                              </div>
                                            </section>

p-strip--suru-blog-hero

This strip should only be used on blog indexes, when attention needs to be drawn to featured posts. It expects the child elements to be reasonably tall in order to look correct.

{{ image(url="https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png", alt="", height="32", width="96", hi_def=True, loading="lazy", attrs={"class": "p-card__thumbnail"}) | safe }}

Raspberry Pi2 and Pi3

For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world's most beloved board.

{{ image(url="https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png", alt="", height="32", width="96", hi_def=True, loading="lazy", attrs={"class": "p-card__thumbnail"}) | safe }}

Raspberry Pi2 and Pi3

For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world's most beloved board.

{{ image(url="https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png", alt="", height="32", width="96", hi_def=True, loading="lazy", attrs={"class": "p-card__thumbnail"}) | safe }}

Raspberry Pi2 and Pi3

For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world's most beloved board. 

<section class="p-strip--suru-blog-hero is-dark">
  <div class="row u-equal-height">
    <div class="col-4 p-card">
      <-- img -->
      <hr class="p-rule--muted">
      <h3 class="p-card__title">
        <-- title -->
      </h3>
      <p class="p-card__content">
        <-- copy -->
      </p>
    </div>

    <div class="col-4 p-card">
      <-- img -->
      <hr class="p-rule--muted">
      <h3 class="p-card__title">
        <-- title -->
      </h3>
      <p class="p-card__content">
        <-- copy -->
      </p>
    </div>

    <div class="col-4 p-card">
      <-- img -->
      <hr class="p-rule--muted">
      <h3 class="p-card__title">
        <-- title -->
      </h3>
      <p class="p-card__content">
        <-- copy -->
      </p>
    </div>
  </div>
</section>

p-strip--suru-blog-header

This strip should be used on blog indexes that don't have featured posts.

{{ image(url="https://assets.ubuntu.com/v1/5ee71af0-Robot+arm+-+white.svg", alt="", height="201", width="200", hi_def=True, loading="lazy", attrs={"class": "u-hide--small"}) | safe }} 
<section class="p-strip--suru-blog-hero is-dark">
  <div class="row">
    <div class="col-7">
      <h1>
        <-- title -->
      </h1>
      <p class="p-heading--4">
        <-- copy -->
      </p>
    </div>

    <div class="col-5 u-align--center u-vertically-center">
      <-- img -->
    </div>
  </div>
</section>
{% endblock content %}