Gradient Banner Section
Full-width gradient banner with centered logo and text, ideal for brand breaks between sections.
Preview
Import
import { GradientBannerSection } from "@sigil-ui/components";Usage
<GradientBannerSection text="One design system. Every component connected." />Custom gradient and height
<GradientBannerSection
text="Powered by tokens"
gradient="linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)"
height="300px"
/>With children
<GradientBannerSection gradient="linear-gradient(135deg, #667eea, #764ba2)">
<Button variant="secondary">Get started</Button>
</GradientBannerSection>Props
| Prop | Type | Default | Description |
|---|---|---|---|
logo | ReactNode | — | Centered logo element |
text | string | — | Short text below the logo |
gradient | string | Primary-based gradient | CSS gradient value for the background |
height | string | "200px" | Minimum height of the banner |
className | string | — | Additional CSS classes |
Plus all standard <section> HTML attributes. Accepts children for custom content.