1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Estructura & Layout layoutfull-widthdesign

Full Bleed Section

Sección de ancho completo de borde a borde para contenidos inmersivos.

Full Bleed Section

Uso

Copia y pega este código directamente en tu página de Astro:

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

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

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FullBleedSection.astro:

astro 
---
/**
 * FullBleedSection — Section that breaks out of the container to hit viewport edges.
 */
interface Props {
  className?: string;
}

const { className = '' } = Astro.props;
---

<section class={`full-bleed ${className}`}>
  <div class="full-bleed-inner">
    <slot>
      <h3>Full Bleed Background Container</h3>
      <p>Content breaks out to full viewport edges while inner content stays readable.</p>
    </slot>
  </div>
</section>

<style>
  .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: rgba(30, 41, 59, 0.4);
    border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
    padding: 3.5rem 1.5rem;
    box-sizing: border-box;
  }
  .full-bleed-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  .full-bleed-inner h3 {
    color: #fff;
    margin-bottom: 0.5rem;
  }
  .full-bleed-inner p {
    color: #94a3b8;
    margin: 0;
  }
</style>
--- /** * FullBleedSection — Section that breaks out of the container to hit viewport edges. */ interface Props { className?: string; } const { className = '' } = Astro.props; --- <section class={`full-bleed ${className}`}> <div class="full-bleed-inner"> <slot> <h3>Full Bleed Background Container</h3> <p>Content breaks out to full viewport edges while inner content stays readable.</p> </slot> </div> </section> <style> .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: rgba(30, 41, 59, 0.4); border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); padding: 3.5rem 1.5rem; box-sizing: border-box; } .full-bleed-inner { max-width: 1200px; margin: 0 auto; text-align: center; } .full-bleed-inner h3 { color: #fff; margin-bottom: 0.5rem; } .full-bleed-inner p { color: #94a3b8; margin: 0; } </style>

Información Rápida

Categoría
Estructura & Layout
Nombre de archivo
FullBleedSection.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
layoutfull-widthdesign