Tile Grid


Elevation
Elevation Raised
photo_library
Pictures under CC-BY-SA (3.0 and 4.0) license

TGV : joost.j bakker

Concord : Eduard Marmet

Minitel : Bernard Marti

Ariane 3 : ESA/CNES/Arianespace

Renault Gabbiano : Renault/Italdesign

Role of the identifier (id)


Svelte
<TileGrid
    tiles={[
        {
            id: "atlas",
            name: "Atlas",
            origin: "Personal",
            years: "2023–24",
            display: true,
            hero: true,
            hero_text: { fr: "En vedette", en: "Featured" },
            hero_icon: "star",
            media:     [{ src: "/images/atlas.jpg", type: "image" }],
            abstract:  { en: "Hardware design system for embedded devices" },
        },
        {
            id: "meridian",
            name: "Meridian",
            origin: "Client",
            years: "2024",
            display: true,
            hero: false,
            media: [{ src: "/images/meridian.jpg", type: "image" }],
            abstract: { en: "Industrial supervision platform" },
        },
        {
            id: "capsule",
            name: "Capsule",
            origin: "Open Source",
            display: true,
            hero: false,
            media: [{ src: "/images/capsule.jpg", type: "image" }],
            abstract: { en: "Modular enclosure for prototyping boards" },
        },
    ]}
    locale="en"
    image_mode="image"
    image_position="center"
    columns={3}
    hero_span="half"
    show_hero_badge={true}
    href_base="/projects"
/>


package_2

import type { Tile, TileMedia, Columns, HeroSpan } from '@abhc/spektral-ui';
PropTypeDefault
tilesreadonly Tile[]—
localestring"en"
image_mode"image" | "mock-up" | "flat""image"
image_position"center" | "top" | "bottom" | "top-right" | "top-left" | "top-center" | "right" | "left" | string"center"
image_sizestringundefined
columns2 | 3 | 43
hero_span"half" | "full""half"
gapstring"1.5rem"
show_hero_badgebooleantrue
show_hero_borderbooleantrue
excerpt_lengthnumber52
href_basestring"/projects"
roundedbooleanfalse
elevation"none" | "subtle" | "hard""none"
raisedbooleanfalse
pattern"none" | "scallops" | "grid" | "sunburst" | "sunrise" | "atoms" | "lozenge" | "waves" | "diamonds" | "shippo" | "kumi_kikko" | string"none"
pattern_colorstring"white"
pattern_opacitynumber0.4
pattern_sizestringundefined
pattern_effect"none" | "glow" | "blur" | "fade""none"
pattern_effect_opacitynumber1
pattern_mask"none" | "ellipse" | "fade""none"
pattern_mask_direction"top" | "bottom" | "left" | "right""bottom"
pattern_mask_sizenumber70
Prop tiles
Type readonly Tile[]
Default —
Prop locale
Type string
Default "en"
Prop image_mode
Type "image" | "mock-up" | "flat"
Default "image"
Prop image_position
Type "center" | "top" | "bottom" | "top-right" | "top-left" | "top-center" | "right" | "left" | string
Default "center"
Prop image_size
Type string
Default undefined
Prop columns
Type 2 | 3 | 4
Default 3
Prop hero_span
Type "half" | "full"
Default "half"
Prop gap
Type string
Default "1.5rem"
Prop show_hero_badge
Type boolean
Default true
Prop show_hero_border
Type boolean
Default true
Prop excerpt_length
Type number
Default 52
Prop href_base
Type string
Default "/projects"
Prop rounded
Type boolean
Default false
Prop elevation
Type "none" | "subtle" | "hard"
Default "none"
Prop raised
Type boolean
Default false
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" | "ellipse" | "fade"
Default "none"
Prop pattern_mask_direction
Type "top" | "bottom" | "left" | "right"
Default "bottom"
Prop pattern_mask_size
Type number
Default 70