Layout layoutfull-widthdesign

Full Bleed Section

Section that breaks out of the container to hit viewport edges.

Full Bleed Section

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { FullBleedSection } from 'astro-component-kit';
---

<FullBleedSection>Content</FullBleedSection>
--- import { FullBleedSection } from 'astro-component-kit'; --- <FullBleedSection>Content</FullBleedSection>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/FullBleedSection.astro and paste the following code:

astro 
---
---
<section class="full-bleed"><slot /></section>
<style>
  .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: rgba(30, 41, 59, 0.5); padding: 4rem 1.5rem; }
</style>
--- --- <section class="full-bleed"><slot /></section> <style> .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: rgba(30, 41, 59, 0.5); padding: 4rem 1.5rem; } </style>

Quick Info

Category
Layout
Filename
FullBleedSection.astro
Dependencies
None — pure Astro + CSS
Tags
layoutfull-widthdesign