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
Type
"single" | "two-cols" | "two-rows" | "main-left" | "main-right" | "grid-2x2"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
stringDefault
"white"Prop pattern_opacity
Type
numberDefault
0.6Prop pattern_size
Type
stringDefault
undefinedProp pattern_effect
Type
"none" | "glow" | "blur" | "fade"Default
"none"Prop pattern_effect_opacity
Type
numberDefault
1Prop pattern_mask
Type
"none" | "ellipse" | "fade"Default
"none"Prop pattern_mask_direction
Type
"top" | "bottom" | "left" | "right"Default
"bottom"Prop pattern_mask_size
Type
numberDefault
70Prop height
Type
stringDefault
"85dvh"Prop gap
Type
stringDefault
"0"Prop cell_1
Type
SnippetDefault
—Prop cell_2
Type
SnippetDefault
—Prop cell_3
Type
SnippetDefault
—Prop cell_4
Type
SnippetDefault
—