Layout layoutfull-widthdesign

Full Bleed Section

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

Component preview not available for: full-bleed-section

Ensure the filename matches FullBleedSection.astro

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