Tile Grid
photo_library
Pictures under CC-BY-SA (3.0 and 4.0) license
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';| Prop | Type | Default |
|---|---|---|
| tiles | readonly Tile[] | — |
| locale | string | "en" |
| image_mode | "image" | "mock-up" | "flat" | "image" |
| image_position | "center" | "top" | "bottom" | "top-right" | "top-left" | "top-center" | "right" | "left" | string | "center" |
| image_size | string | undefined |
| columns | 2 | 3 | 4 | 3 |
| hero_span | "half" | "full" | "half" |
| gap | string | "1.5rem" |
| show_hero_badge | boolean | true |
| show_hero_border | boolean | true |
| excerpt_length | number | 52 |
| href_base | string | "/projects" |
| rounded | boolean | false |
| elevation | "none" | "subtle" | "hard" | "none" |
| raised | boolean | false |
| 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" | "ellipse" | "fade" | "none" |
| pattern_mask_direction | "top" | "bottom" | "left" | "right" | "bottom" |
| pattern_mask_size | number | 70 |
Prop tiles
Type
readonly Tile[]Default
—Prop locale
Type
stringDefault
"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" | stringDefault
"center"Prop image_size
Type
stringDefault
undefinedProp columns
Type
2 | 3 | 4Default
3Prop hero_span
Type
"half" | "full"Default
"half"Prop gap
Type
stringDefault
"1.5rem"Prop show_hero_badge
Type
booleanDefault
trueProp show_hero_border
Type
booleanDefault
trueProp excerpt_length
Type
numberDefault
52Prop href_base
Type
stringDefault
"/projects"Prop rounded
Type
booleanDefault
falseProp elevation
Type
"none" | "subtle" | "hard"Default
"none"Prop raised
Type
booleanDefault
falseProp pattern
Type
"none" | "scallops" | "grid" | "sunburst" | "sunrise" | "atoms" | "lozenge" | "waves" | "diamonds" | "shippo" | "kumi_kikko" | stringDefault
"none"Prop pattern_color
Type
stringDefault
"white"Prop pattern_opacity
Type
numberDefault
0.4Prop 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
70