Features
A layout and content template that includes images and background options.
This is a label
Lorem ipsum
It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.
-7a793c92.webp)
This is a label
Lorem ipsum
It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.
-55d75421.webp)
This is a label
Lorem ipsum
It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.
-eeda79f6.webp)
-af305264.webp)
This is a label
Lorem ipsum
It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.
-53d1e5c3.webp)
-8af24cc3.webp)
-794ab765.webp)
<section class="c-feature | o-section o-section--xl">
<div class="o-wrapper">
<div class="o-grid | u-align-middle">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-mb">
<div class="o-focus o-focus--lg o-flow">
<hgroup>
<span class="u-heading u-fw-500 u-mb-xs" contenteditable>This is a label</span>
<h2 class="u-heading u-alpha" contenteditable>Lorem ipsum</h2>
</hgroup>
<p>It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.</p>
</div>
</div>
<div class="c-feature__img-group-1 | o-grid__item">
<div class="c-feature__img:3x4 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-1.webp 1x, /assets/img/ds/layouts/page/feature/featured-1-(2x).webp 2x" loading="lazy" width="376" height="202" alt />
</div>
</div>
</div>
</div>
</section><section class="c-feature | o-section o-section--xl">
<div class="o-wrapper">
<div class="o-grid | u-align-middle">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-mb">
<div class="o-focus o-focus--lg o-flow">
<hgroup>
<span class="u-heading u-fw-500 u-mb-xs" contenteditable>This is a label</span>
<h2 class="u-heading u-alpha" contenteditable>Lorem ipsum</h2>
</hgroup>
<p>It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.</p>
</div>
</div>
<div class="c-feature__img-group-1 | o-grid__item">
<div class="c-feature__img:4x3 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-2-3x4.webp 1x, /assets/img/ds/layouts/page/feature/featured-2-3x4-(2x).webp 2x" loading="lazy" width="476" height="357" alt />
</div>
</div>
</div>
</div>
</section><section class="c-feature | o-section o-section--xl">
<div class="o-wrapper">
<div class="o-grid | u-align-middle">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-mb">
<div class="o-focus o-focus--lg o-flow">
<hgroup>
<span class="u-heading u-fw-500 u-mb-xs" contenteditable>This is a label</span>
<h2 class="u-heading u-alpha" contenteditable>Lorem ipsum</h2>
</hgroup>
<p>It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.</p>
</div>
</div>
<div class="c-feature__img-group-2 | o-grid__item">
<div class="c-feature__img:3x4 c-feature__img-grey">
<img class="c-img | u-aspect--3:4" srcset="/assets/img/ds/layouts/page/feature/featured-3-3x4.webp 1x, /assets/img/ds/layouts/page/feature/featured-3-3x4-(2x).webp 2x" loading="lazy" width="276" height="368" alt />
</div>
<div class="c-feature__img:4x3 c-feature__img-grey">
<img class="c-img | u-aspect--4:3" srcset="/assets/img/ds/layouts/page/feature/featured-3-4x3.webp 1x, /assets/img/ds/layouts/page/feature/featured-3-4x3-(2x).webp 2x" loading="lazy" width="352" height="264" alt />
</div>
</div>
</div>
</div>
</section><section class="c-feature | o-section o-section--xl">
<div class="o-wrapper">
<div class="o-grid | u-align-middle">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-mb">
<div class="o-focus o-focus--lg o-flow">
<hgroup>
<span class="u-heading u-fw-500 u-mb-xs" contenteditable>This is a label</span>
<h2 class="u-heading u-alpha" contenteditable>Lorem ipsum</h2>
</hgroup>
<p>It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.</p>
</div>
</div>
<div class="c-feature__img-group-3 | o-grid__item">
<div class="c-feature__img:3x4 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-4-3x4.webp 1x, /assets/img/ds/layouts/page/feature/featured-4-3x4-(2x).webp 2x" loading="lazy" width="276" height="368" alt />
</div>
<div class="c-feature__img:4x3 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-4-4x3.webp 1x, /assets/img/ds/layouts/page/feature/featured-4-4x3-(2x).webp 2x" loading="lazy" width="352" height="264" alt />
</div>
<div class="c-feature__img:1x1 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-4-3x3.webp 1x, /assets/img/ds/layouts/page/feature/featured-4-3x3-(2x).webp 2x" loading="lazy" width="276" height="276" alt />
</div>
</div>
</div>
</div>
</section>Reverse Alignment
Reverse the direction of the content and images.
This is a label
Lorem ipsum
It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.
<section class="c-feature | o-section o-section--xl">
<div class="o-wrapper">
<div class="o-grid | u-align-middle u-reverse">
<div class="o-grid__item | u-col-12 u-col-6-@bp2 u-mb">
<div class="o-focus o-focus--lg o-flow">
<hgroup>
<span class="u-heading u-fw-500 u-mb-xs" contenteditable>This is a label</span>
<h2 class="u-heading u-alpha" contenteditable>Lorem ipsum</h2>
</hgroup>
<p>It's a droid control ship. They've probably spotted us. We haven't much time. Jar Jar is on his way to the Gungan city, Master. Good. Do you think the Queen's idea will work? The Gungans will not easily be swayed, and we cannot use our power to help her. I'm.</p>
</div>
</div>
<div class="c-feature__img-group-1 | o-grid__item">
<div class="c-feature__img:3x4 c-feature__img-grey">
<img class="c-img" srcset="/assets/img/ds/layouts/page/feature/featured-1.webp 1x, /assets/img/ds/layouts/page/feature/featured-1-(2x).webp 2x" loading="lazy" width="376" height="202" alt />
</div>
</div>
</div>
</div>
</section>