Hero - Spektral UI

Layout

Palette

Pattern

Pattern color

Pattern size

Pattern opacity

Effect

Effect opacity

100

Mask

Mask dir

Mask size

cell_1

Usage

Svelte

<Hero
    layout="single"
    palette="transparent"
    pattern="scallops"
    pattern_effect="glow"
    pattern_mask="ellipse"
    height="85dvh"
>
    {#snippet cell_1()}
        <div class="hero-content">
            <Headline size="lg" uppercase>Spektral UI</Headline>
            <p>A composable design system</p>
            <Button palette="accent" href="/docs">Get started</Button>
        </div>
    {/snippet}
</Hero> 

API

Prop	Type	Default
layout	`"single" \| "two-cols" \| "two-rows" \| "main-left" \| "main-right" \| "grid-2x2"`	`"single"`
palette	`"transparent" \| "tone" \| "accent" \| "accent-bg"`	`"transparent"`
pattern	`"none" \| "grid" \| "scallops" \| "lozenge" \| "sunburst" \| "sunrise" \| "atoms" \| "waves" \| "diamonds" \| "shippo" \| "kumi_kikko"`	`"none"`
pattern_color	`string`	`"white"`
pattern_opacity	`number`	`0.6`
pattern_size	`string`	`undefined`
pattern_effect	`"none" \| "glow" \| "blur" \| "fade"`	`"none"`
pattern_effect_opacity	`number`	`1`
pattern_mask	`"none" \| "ellipse" \| "fade"`	`"none"`
pattern_mask_direction	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`
pattern_mask_size	`number`	`70`
height	`string`	`"85dvh"`
gap	`string`	`"0"`
cell_1	`Snippet`	`—`
cell_2	`Snippet`	`—`
cell_3	`Snippet`	`—`
cell_4	`Snippet`	`—`

Prop layout

Default "single"

Prop palette

Type "transparent" | "tone" | "accent" | "accent-bg"

Default "transparent"

Prop pattern

Type

"none" | "grid" | "scallops" | "lozenge" | "sunburst" | "sunrise" | "atoms" | "waves" | "diamonds" | "shippo" | "kumi_kikko"

Default "none"

Prop pattern_color

Type string

Default "white"

Prop pattern_opacity

Type number

Default 0.6

Prop pattern_size

Type string

Default undefined

Prop pattern_effect

Type "none" | "glow" | "blur" | "fade"

Default "none"

Prop pattern_effect_opacity

Type number

Default 1

Prop pattern_mask

Type "none" | "ellipse" | "fade"

Default "none"

Prop pattern_mask_direction

Type "top" | "bottom" | "left" | "right"

Default "bottom"

Prop pattern_mask_size

Type number

Default 70

Prop height

Type string

Default "85dvh"

Prop gap

Type string

Default "0"

Prop cell_1

Type Snippet

Default —

Prop cell_2

Type Snippet

Default —

Prop cell_3

Type Snippet

Default —

Prop cell_4

Type Snippet

Default —