FullBleed - CSS class
Can also be applied as as standalone CSS class.
Default
<div class="full-bleed">
<p>...</p>
<img class="full-bleed--4" src="/img/image.jpg" alt="Test." />
<p>...</p>
<p>...</p>
</div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?
With CSS custom properties appiled
<div
class="full-bleed"
style="--full-bleed-measure--component: var(--measure-small); --full-bleed-side-space--component: var(--s2); --full-bleed-stack-space--component: var(--s2);"
>
<p>...</p>
<img class="full-bleed--4" src="/img/image.jpg" alt="Test." />
<p>...</p>
<p>...</p>
</div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo vitae explicabo quam reprehenderit. Atque autem, aspernatur facilis dolorum, nisi, eum ipsa illum mollitia sed at laudantium quas voluptatem incidunt qui?