Footer - Spektral UI

Palette

Rounded

Preset

Pattern

Pattern color

Pattern size

Pattern opacity

Effect

Effect opacity

100

Mask

Mask dir

Mask size

flex_no_wrap

Svelte

<!-- Social / portfolio — icon links left, copyright right -->
{#snippet social_links()}
    <a href="https://github.com/you" class="footer-icon-link" aria-label="GitHub" target="_blank">
        <!-- SVG icon -->
    </a>
    <a href="https://linkedin.com/in/you" class="footer-icon-link" aria-label="LinkedIn" target="_blank">
        <!-- SVG icon -->
    </a>
{/snippet}

{#snippet copyright()}
    <p>© 2025 — MIT License</p>
{/snippet}

<Footer palette="accent" leading={social_links} trailing={copyright} /> 

API

Prop	Type	Default
palette	`"accent" \| "tone"`	`"accent"`
rounded	`boolean`	`false`
style	`string`	`—`
pattern	`"none" \| "scallops" \| "grid" \| "sunburst" \| "sunrise" \| "atoms" \| "lozenge" \| "waves" \| "diamonds" \| "shippo" \| "kumi_kikko" \| string`	`"none"`
pattern_color	`string`	`"white"`
pattern_opacity	`number`	`0.4`
pattern_size	`string`	`undefined`
pattern_effect	`"none" \| "glow" \| "blur" \| "fade"`	`"none"`
pattern_effect_opacity	`number`	`1`
pattern_mask	`"none" \| "fade" \| "ellipse"`	`"none"`
pattern_mask_direction	`"top" \| "bottom" \| "left" \| "right"`	`"left"`
pattern_mask_size	`number`	`70`
leading	`Snippet`	`—`
children	`Snippet`	`—`
trailing	`Snippet`	`—`

Prop palette

Type "accent" | "tone"

Default "accent"

Prop rounded

Type boolean

Default false

Prop style

Type string

Default —

Prop pattern

Type

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

Default "none"

Prop pattern_color

Type string

Default "white"

Prop pattern_opacity

Type number

Default 0.4

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" | "fade" | "ellipse"

Default "none"

Prop pattern_mask_direction

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

Default "left"

Prop pattern_mask_size

Type number

Default 70

Prop leading

Type Snippet

Default —

Prop children

Type Snippet

Default —

Prop trailing

Type Snippet

Default —