Content components
Text, images, code, badges and avatars.
Generated from the component definitions in src/components, the same source the parser validates against and the model guide is built from. Every element also accepts if=, tip=. Each example below is rendered live by the SayShape engine.
text
A paragraph or heading that wraps to the available width. Use {expressions} to show state.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | The words to show. May include {expressions}. |
style | display / title / lead / body / caption | display, title, lead, body or caption. |
weight | regular / semibold / bold | regular, semibold or bold. Titles default to semibold. |
tone | default / muted / accent / good / warn / bad | Color role: default, muted, accent, good, warn or bad. |
align | left / center / right | left, center or right. |
strike | boolean | Draw a line through the text, e.g. for an old price. |
icon | string | An icon before the text, by name from icon's list, e.g. icon=check-circle. |
rich | boolean | true reads inline formatting in the words: bold, italic, code and links words. A link is pressed by the person and sent to you as emit:link with its address; SayShape never opens it. One paragraph per text line. |
sayshape
state guests=2 nights=3
text "Weekend in Yosemite" style=title
text "{guests} guests, {nights} nights" tone=muted
text "$160" tone=muted strike=true
text "Payment received" icon=check-circle tone=good
text "**Free** cancellation until *2 days* before; see [the terms](https://northwind.example/terms)." rich=trueimage
A picture, such as a product photo. The quoted text says what it shows, and is displayed if the image can't load.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | What the image shows, e.g. Blue trail runners from the side. |
src | string, required | The image URL. Only the app's own site and hosts it allows will load. |
ratio | 16:9 / 4:3 / 3:2 / 1:1 / 2:3 / 3:4 | Width to height: 16:9, 4:3, 3:2, 1:1, 2:3 or 3:4. The space is kept while the image loads. |
fit | cover / contain | cover fills the space and crops the edges; contain shows the whole image. |
sayshape
image "Ridgeline trail runners, side view" src="/images/ridgeline.jpg" ratio=4:3code
A short piece of code or a command, in a monospaced font on a tinted block.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | The code. Long lines wrap. |
sayshape
code "npm install sayshape"badge
A small rounded label for a status or a short tag, like Shipped or New.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | The label, one or two words. |
tone | accent / good / warn / bad / muted | Color role: accent, good, warn, bad or muted. |
sayshape
badge "Shipped" tone=goodavatar
A person's initials in a circle, with their name and an optional detail line beside it.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | The person's name. The initials come from it. |
detail | string | A second line under the name, like a role. |
size | sm / md / lg | sm, md or lg. |
tone | accent / good / warn / bad / muted | Circle color role: accent, good, warn, bad or muted. |
name | boolean | Show the name beside the circle (default true). |
sayshape
avatar "Ada Lovelace" detail="Trip organizer"callout
The one thing to notice in an answer: a key finding, a warning or a next step.
| Prop | Type | Description |
|---|---|---|
"text" | text, required | The takeaway, in one short sentence. May include {expressions}. Long text wraps. |
detail | string | An optional second line in muted text, e.g. what the finding is based on. |
tone | info / accent / good / warn / bad | info (default, the accent color) for a finding, good for good news, warn for something to watch, bad for a problem. accent is the same as info. |
icon | boolean | Show a small icon matching the tone: i, a tick, ! or ×. |
sayshape
callout "Rock is 47% of revenue" detail="Up from 41% last year" icon=trueicon
A small symbol on its own, like a status mark or a weather sign. To start a line of text or a list row with one, use icon= on text or list-item instead.
| Prop | Type | Description |
|---|---|---|
name | string, required | Which icon: check, check-circle, x, x-circle, warning, info, help, clock, arrow-up, arrow-down, arrow-left, arrow-right, trend-up, trend-down, plus, minus, refresh, sun, moon, cloud, rain, snow, storm, wind, thermometer, droplet, pin, globe, plane, car, truck, home, building, dollar, card, cart, package, bar-chart, pie-chart, percent, tag, briefcase, file, target, bolt, idea, lock, user, users, calendar, mail, phone, chat, star, heart, spade, club, diamond, bell, search, filter, download, copy, share, link, sliders. |
tone | default / muted / accent / good / warn / bad | Color role: default, muted, accent, good, warn or bad. |
size | sm / md / lg | sm, md or lg. |
label | string | What the icon means, read by screen readers, when nothing beside it says so, e.g. label="Sunny". Leave it out for decoration. |
sayshape
icon name=sun tone=warn size=lg
icon name=check-circle tone=goodtile
A small fixed-size face with a value, an optional icon and a detail line, for playing cards, seats, dice, keys or lottery numbers. Several in a row keep their size and wrap.
| Prop | Type | Description |
|---|---|---|
"text" | text | The value on its face, e.g. A, 10 or B4. Keep it short. |
icon | string | An icon on its face, by name from icon's list, e.g. icon=club. The suits are club, spade, heart and diamond. |
shape | card / square | card (portrait, like a playing card) or square (a seat, a key, a die). |
size | sm / md / lg | sm, md or lg. |
detail | string | A small line under the value, e.g. a price or an atomic weight. Keep it to a few characters at size=sm. |
tone | default / muted / accent / good / warn / bad | Color of the value and icon: default, muted, accent, good, warn or bad (red suits use bad). |
variant | raised / outline | raised (a lifted face) or outline. |
selected | condition | Expression; when true the tile is marked as chosen, e.g. selected={s.picked}. |
disabled | condition | Expression; when true it's greyed out and can't be pressed, e.g. a seat that's taken. |
on | action | Actions to run when pressed, e.g. emit:changed. Separate several with ; |
label | string | What screen readers and Copy text say for it, e.g. label="Seat B4". Default: its value (with its suit, as in Q of hearts) and detail. |
sayshape
row gap=8
tile "4" icon=club label="4 of clubs"
tile "Q" icon=heart tone=bad label="Queen of hearts"
tile "A" icon=spade label="Ace of spades"
tile "B4" shape=square detail="$14" selected=true on=emit:seat