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.
<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.
<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.
<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.
<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.
<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.
p-strip--suru-half-and-half-reversed - illustration
This strip has room for an image or an illustration.
<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.
<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.
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.
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.
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="u-sv1">
<h3 class="p-card__title">
<-- title -->
</h3>
<p class="p-card__content">
<-- copy -->
</p>
</div>
<div class="col-4 p-card">
<-- img -->
<hr class="u-sv1">
<h3 class="p-card__title">
<-- title -->
</h3>
<p class="p-card__content">
<-- copy -->
</p>
</div>
<div class="col-4 p-card">
<-- img -->
<hr class="u-sv1">
<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.
<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>