Packs

Core components

The core pack's 25 components: always included: layout, text blocks, numbers, charts, forms and buttons.

View as Markdown

Core comes with every answer, whichever packs an app names.

Markdown

Text between components is Markdown: headings, lists, tables, emphasis, links, code and images from the hosts an app allows.

A weekend in Lisbon

Lisbon is compact and hilly. Most of what you want to see sits between Baixa and Belém, and the trams cover the steep parts.

Belém Tower on the Tagus

  • Day one: Alfama, the castle, a fado dinner
  • Day two: Belém, pastries, the river walk
  • Day three: Sintra by train (40 minutes from Rossio)
NeighbourhoodGood forFrom the centre
AlfamaOld streets, fado10 min walk
BelémMonuments, pastries20 min by tram
Príncipe RealGardens, shops15 min walk
The 28 tram is lovely but packed after 10:00. Ride it early.

Book the castle online with code LISBOA10 for 10% off.

The model's answer
## A weekend in Lisbon
Lisbon is compact and hilly. Most of what you want to see sits between Baixa and Belém, and the trams cover the steep parts.


![Belém Tower on the Tagus](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAIAAAD6wG44AAACmklEQVR42u3dQU7bQBQGYDOteopKZdMjVF3CrhKX7C2oqm5gWfUIbOAmXVTqgiCI43nPMy/fv4QQz/jLe7bjSbj4/uPXInXT7ALAAlgAC2ABLIAFMGABLIAFsAAWwAIYsACW+fLeLgjNt69fDn/48/cfwAVdD3+bIK1FZ+ue9kgVPBntsz+JK2UVvKduQikD3l831Biw62DJKr6IIgY8lkp3Y8BatADWn4d9TsAqWAALYAEsgAVwaiJu8/V9TsAqWADr0sP2fMADqUQc0QFr0ZJSfEHr7gAPYRy3qtKy2f7Gq+73Ra99V8F7lnLCJxtUcKyxzyapZmfRy7Isy+3dvZdLTeDbu/t/uowLAj9D/Y8t0wO/Ysl4euA3CRnPCnx8E2Y8H/BaM4fkaYC3UDEeHXi70PjGe43wYt9/jNV92jfXVyPr5g9vN+C4V/RQxofTTB5eq9evxmnXL44k+cQwu4LT5rZvHR8zzZwRtqonGjteQQ11Hd9q7+78ja7aYsLwMlr07gfFnGa4ZZpxI4wFHuryNJR5+0yDhtfO5xZ90Hh6HX2ChteKneAk78S+Txix0zq36CneFu7VDKd4r6Yn8Fxv+m/ZiQkz7WXcavfkCKScmfbaSjvn9Y6D337usq1NLbrMjdhj+uGOk93Srhvd8ZeAbdn6KRVcdQXFi4UyzmRPq+NG95WpDTXZ0wazooLPZ+nTzfXVyJNdVcpHAVvVNq9xo1v7Aq9ZdVzbuCncqY3fZGoKt3YpN4Vb27gp3NrGTeHWPiS/+/Dx08Pjk71TJg+PT58vL31P1rm0a8DFjX1PVnFjFbz4ALgAFsACWAALYAEMWAALYAEsgAWwAAYsgAWwABbAAlgAC2DAAlgAC2ABLIAFMGABLNPkL96PXxmAn95xAAAAAElFTkSuQmCC)


- Day one: Alfama, the castle, a fado dinner
- Day two: Belém, pastries, the river walk
- Day three: Sintra by train (40 minutes from Rossio)


| Neighbourhood | Good for | From the centre |
|---|---|---|
| Alfama | Old streets, fado | 10 min walk |
| Belém | Monuments, pastries | 20 min by tram |
| Príncipe Real | Gardens, shops | 15 min walk |


> The 28 tram is lovely but packed after 10:00. Ride it early.


Book the castle online with </span><span class="t1">code LISBOA10</span><span class="t3"> for 10% off.

Card

A section, optionally with a header.

Between its tags: Markdown and other components.

Attribute Type Required Values
title text
subtitle text

Trip budget

Three nights, two people

Flights are booked. What's left is the hotel, food and two day trips, about €740 in all.

The model's answer
<Card title="Trip budget" subtitle="Three nights, two people">
Flights are booked. What's left is the hotel, food and two day trips, about **€740** in all.
</Card>

Columns

Puts its children side by side, stacking on narrow screens.

Between its tags: Markdown and other components.

Hotel

Three nights in Chiado, breakfast included. Check-in from 15:00.

Flights

TP 1351 out on Friday 08:40, TP 1358 back on Monday 19:15.

Getting around

A Viva Viagem card covers trams, metro and the river ferries.

The model's answer
<Columns>
<Card title="Hotel">
Three nights in Chiado, breakfast included. Check-in from 15:00.
</Card>
<Card title="Flights">
TP 1351 out on Friday 08:40, TP 1358 back on Monday 19:15.
</Card>
<Card title="Getting around">
A Viva Viagem card covers trams, metro and the river ferries.
</Card>
</Columns>

Tabs

One panel per Tab.

Between its tags: only Tab components.

Three nights, flights booked, hotel to confirm by Thursday.

  • Time Out Market for the first night
  • Pastéis de Belém on day two
  • A tasca in Alfama for fado

Comfortable shoes (the hills are steep), a light jacket for the evenings, sunscreen.

The model's answer
<Tabs>
<Tab title="Overview">
Three nights, flights booked, hotel to confirm by Thursday.
</Tab>
<Tab title="Food">
- Time Out Market for the first night
- Pastéis de Belém on day two
- A tasca in Alfama for fado
</Tab>
<Tab title="Packing">
Comfortable shoes (the hills are steep), a light jacket for the evenings, sunscreen.
</Tab>
</Tabs>

Tab

A panel inside Tabs.

Between its tags: Markdown and other components. It goes inside Tabs.

Attribute Type Required Values
title text yes

Three nights, flights booked, hotel to confirm by Thursday.

  • Time Out Market for the first night
  • Pastéis de Belém on day two
  • A tasca in Alfama for fado

Comfortable shoes (the hills are steep), a light jacket for the evenings, sunscreen.

The model's answer
<Tabs>
<Tab title="Overview">
Three nights, flights booked, hotel to confirm by Thursday.
</Tab>
<Tab title="Food">
- Time Out Market for the first night
- Pastéis de Belém on day two
- A tasca in Alfama for fado
</Tab>
<Tab title="Packing">
Comfortable shoes (the hills are steep), a light jacket for the evenings, sunscreen.
</Tab>
</Tabs>

Details

A collapsible section, closed until opened (open starts it open).

Between its tags: Markdown and other components.

Attribute Type Required Values
title text yes
open true or false
Why the hotel costs more on Saturday

Weekend rates in Chiado run about 30% higher, and this weekend there's a football match at the Estádio da Luz.

Cancellation terms

Free cancellation until 48 hours before check-in. After that the first night is charged.

The model's answer
<Details title="Why the hotel costs more on Saturday">
Weekend rates in Chiado run about 30% higher, and this weekend there's a football match at the Estádio da Luz.
</Details>
<Details title="Cancellation terms" open="true">
Free cancellation until 48 hours before check-in. After that the first night is charged.
</Details>

Steps

An ordered sequence or timeline.

Between its tags: only Step components.

  1. Book flightsPaid on 2 October
  2. Confirm the hotelDue Thursday

    Reply to the hotel's email with the arrival time.

  3. Buy the Sintra train tickets
The model's answer
<Steps>
<Step title="Book flights" status="done" subtitle="Paid on 2 October" />
<Step title="Confirm the hotel" status="current" subtitle="Due Thursday">
Reply to the hotel's email with the arrival time.
</Step>
<Step title="Buy the Sintra train tickets" status="todo" />
</Steps>

Step

One step inside Steps.

Between its tags: Markdown and other components. It goes inside Steps.

Attribute Type Required Values
title text yes
status one of done, current, todo (default)
subtitle text
  1. Book flightsPaid on 2 October
  2. Confirm the hotelDue Thursday

    Reply to the hotel's email with the arrival time.

  3. Buy the Sintra train tickets
The model's answer
<Steps>
<Step title="Book flights" status="done" subtitle="Paid on 2 October" />
<Step title="Confirm the hotel" status="current" subtitle="Due Thursday">
Reply to the hotel's email with the arrival time.
</Step>
<Step title="Buy the Sintra train tickets" status="todo" />
</Steps>

Callout

A highlighted note or alert.

Between its tags: Markdown and other components.

Attribute Type Required Values
tone one of neutral, info (default), success, warning, danger
title text
The model's answer
<Callout tone="info" title="Tip">Museums are free on Sunday mornings for residents only, so check the ticket rules.</Callout>
<Callout tone="success" title="Booked">Your table at Taberna Sal Grosso is confirmed for 20:30.</Callout>


<Callout tone="warning" title="Strike on Friday">Metro staff plan a partial strike from 06:30 to 10:30.</Callout>


<Callout tone="danger" title="Passport expires soon">It must be valid for three months after your return date.</Callout>


<Callout tone="neutral">Prices are in euros and include VAT.</Callout>

Stat

One key number, its unit inside value ("3.7 km", "$1,204").

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
value text yes
change text
note text
tone one of neutral (default), info, success, warning, danger
icon icon name
Monthly revenue$48,210+12.4%
Active users3,904+3.1%vs last month
Churn2.8%+0.6 pts
The model's answer
<Columns>
<Stat label="Monthly revenue" value="$48,210" change="+12.4%" tone="success" icon="currency-dollar" />
<Stat label="Active users" value="3,904" change="+3.1%" note="vs last month" />
<Stat label="Churn" value="2.8%" change="+0.6 pts" tone="danger" />
</Columns>

Badge

A short status label.

Between its tags: inline text: its label.

Attribute Type Required Values
tone one of neutral (default), info, success, warning, danger

Order #4821 is Shipped, invoice Overdue, return window 14 days, payment Failed, label Draft.

The model's answer
Order **#4821** is <Badge tone="success">Shipped</Badge>, invoice <Badge tone="warning">Overdue</Badge>, return window <Badge tone="info">14 days</Badge>, payment <Badge tone="danger">Failed</Badge>, label <Badge>Draft</Badge>.

Progress

A progress bar.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
value number yes
max number default 100
label text
tone one of neutral (default), info, success, warning, danger
Course progress58%
Storage used91%
Fundraising goal64%
The model's answer
<Progress label="Course progress" value="7" max="12" />
<Progress label="Storage used" value="91" max="100" tone="danger" />
<Progress label="Fundraising goal" value="64" tone="success" />

Avatar

A person's picture or initials, with their name.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
name text yes
src address
subtitle text
ID
Inês DuarteProduct lead
TR
Tomás RibeiroEngineering
MC
Mia ChenDesign
The model's answer
<Columns>
<Avatar name="Inês Duarte" subtitle="Product lead" />
<Avatar name="Tomás Ribeiro" subtitle="Engineering" />
<Avatar name="Mia Chen" subtitle="Design" />
</Columns>

A grid of images.

Between its tags: Markdown images, one a line.

Tram 28 climbing through Alfama
Pastéis de nata fresh from the oven
The view from Miradouro de Santa Luzia
The model's answer
<Gallery>
![Tram 28 climbing through Alfama](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAIAAAD6wG44AAACmklEQVR42u3dQU7bQBQGYDOteopKZdMjVF3CrhKX7C2oqm5gWfUIbOAmXVTqgiCI43nPMy/fv4QQz/jLe7bjSbj4/uPXInXT7ALAAlgAC2ABLIAFMGABLIAFsAAWwAIYsACW+fLeLgjNt69fDn/48/cfwAVdD3+bIK1FZ+ue9kgVPBntsz+JK2UVvKduQikD3l831Biw62DJKr6IIgY8lkp3Y8BatADWn4d9TsAqWAALYAEsgAVwaiJu8/V9TsAqWADr0sP2fMADqUQc0QFr0ZJSfEHr7gAPYRy3qtKy2f7Gq+73Ra99V8F7lnLCJxtUcKyxzyapZmfRy7Isy+3dvZdLTeDbu/t/uowLAj9D/Y8t0wO/Ysl4euA3CRnPCnx8E2Y8H/BaM4fkaYC3UDEeHXi70PjGe43wYt9/jNV92jfXVyPr5g9vN+C4V/RQxofTTB5eq9evxmnXL44k+cQwu4LT5rZvHR8zzZwRtqonGjteQQ11Hd9q7+78ja7aYsLwMlr07gfFnGa4ZZpxI4wFHuryNJR5+0yDhtfO5xZ90Hh6HX2ChteKneAk78S+Txix0zq36CneFu7VDKd4r6Yn8Fxv+m/ZiQkz7WXcavfkCKScmfbaSjvn9Y6D337usq1NLbrMjdhj+uGOk93Srhvd8ZeAbdn6KRVcdQXFi4UyzmRPq+NG95WpDTXZ0wazooLPZ+nTzfXVyJNdVcpHAVvVNq9xo1v7Aq9ZdVzbuCncqY3fZGoKt3YpN4Vb27gp3NrGTeHWPiS/+/Dx08Pjk71TJg+PT58vL31P1rm0a8DFjX1PVnFjFbz4ALgAFsACWAALYAEMWAALYAEsgAWwAAYsgAWwABbAAlgAC2DAAlgAC2ABLIAFMGABLNPkL96PXxmAn95xAAAAAElFTkSuQmCC)
![Pastéis de nata fresh from the oven](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAIAAAD6wG44AAACmklEQVR42u3dQU7bQBQGYDOteopKZdMjVF3CrhKX7C2oqm5gWfUIbOAmXVTqgiCI43nPMy/fv4QQz/jLe7bjSbj4/uPXInXT7ALAAlgAC2ABLIAFMGABLIAFsAAWwAIYsACW+fLeLgjNt69fDn/48/cfwAVdD3+bIK1FZ+ue9kgVPBntsz+JK2UVvKduQikD3l831Biw62DJKr6IIgY8lkp3Y8BatADWn4d9TsAqWAALYAEsgAVwaiJu8/V9TsAqWADr0sP2fMADqUQc0QFr0ZJSfEHr7gAPYRy3qtKy2f7Gq+73Ra99V8F7lnLCJxtUcKyxzyapZmfRy7Isy+3dvZdLTeDbu/t/uowLAj9D/Y8t0wO/Ysl4euA3CRnPCnx8E2Y8H/BaM4fkaYC3UDEeHXi70PjGe43wYt9/jNV92jfXVyPr5g9vN+C4V/RQxofTTB5eq9evxmnXL44k+cQwu4LT5rZvHR8zzZwRtqonGjteQQ11Hd9q7+78ja7aYsLwMlr07gfFnGa4ZZpxI4wFHuryNJR5+0yDhtfO5xZ90Hh6HX2ChteKneAk78S+Txix0zq36CneFu7VDKd4r6Yn8Fxv+m/ZiQkz7WXcavfkCKScmfbaSjvn9Y6D337usq1NLbrMjdhj+uGOk93Srhvd8ZeAbdn6KRVcdQXFi4UyzmRPq+NG95WpDTXZ0wazooLPZ+nTzfXVyJNdVcpHAVvVNq9xo1v7Aq9ZdVzbuCncqY3fZGoKt3YpN4Vb27gp3NrGTeHWPiS/+/Dx08Pjk71TJg+PT58vL31P1rm0a8DFjX1PVnFjFbz4ALgAFsACWAALYAEMWAALYAEsgAWwAAYsgAWwABbAAlgAC2DAAlgAC2ABLIAFMGABLNPkL96PXxmAn95xAAAAAElFTkSuQmCC)
![The view from Miradouro de Santa Luzia](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAIAAAD6wG44AAACmklEQVR42u3dQU7bQBQGYDOteopKZdMjVF3CrhKX7C2oqm5gWfUIbOAmXVTqgiCI43nPMy/fv4QQz/jLe7bjSbj4/uPXInXT7ALAAlgAC2ABLIAFMGABLIAFsAAWwAIYsACW+fLeLgjNt69fDn/48/cfwAVdD3+bIK1FZ+ue9kgVPBntsz+JK2UVvKduQikD3l831Biw62DJKr6IIgY8lkp3Y8BatADWn4d9TsAqWAALYAEsgAVwaiJu8/V9TsAqWADr0sP2fMADqUQc0QFr0ZJSfEHr7gAPYRy3qtKy2f7Gq+73Ra99V8F7lnLCJxtUcKyxzyapZmfRy7Isy+3dvZdLTeDbu/t/uowLAj9D/Y8t0wO/Ysl4euA3CRnPCnx8E2Y8H/BaM4fkaYC3UDEeHXi70PjGe43wYt9/jNV92jfXVyPr5g9vN+C4V/RQxofTTB5eq9evxmnXL44k+cQwu4LT5rZvHR8zzZwRtqonGjteQQ11Hd9q7+78ja7aYsLwMlr07gfFnGa4ZZpxI4wFHuryNJR5+0yDhtfO5xZ90Hh6HX2ChteKneAk78S+Txix0zq36CneFu7VDKd4r6Yn8Fxv+m/ZiQkz7WXcavfkCKScmfbaSjvn9Y6D337usq1NLbrMjdhj+uGOk93Srhvd8ZeAbdn6KRVcdQXFi4UyzmRPq+NG95WpDTXZ0wazooLPZ+nTzfXVyJNdVcpHAVvVNq9xo1v7Aq9ZdVzbuCncqY3fZGoKt3YpN4Vb27gp3NrGTeHWPiS/+/Dx08Pjk71TJg+PT58vL31P1rm0a8DFjX1PVnFjFbz4ALgAFsACWAALYAEMWAALYAEsgAWwAAYsgAWwABbAAlgAC2DAAlgAC2ABLIAFMGABLNPkL96PXxmAn95xAAAAAElFTkSuQmCC)
</Gallery>

Chart

Charts the Markdown table inside: first column labels, every column after it numbers (one series each).

Between its tags: a Markdown table (first column labels, the others series).

Attribute Type Required Values
type one of bar (default), line, area, pie, donut, radar, scatter, stacked, horizontal
title text
x text
y text

bar

Signups by monthSignups
0100200300400JanFebMarAprMay
Signups by monthSignups
0100200300400JanMarMay
Signups by monthSignups
0100200300400JanMarMay
Signups by month
MonthSignups
Jan120
Feb180
Mar240
Apr210
May305
The model's answer
<Chart type="bar" title="Signups by month" y="Signups">
| Month | Signups |
|---|---|
| Jan | 120 |
| Feb | 180 |
| Mar | 240 |
| Apr | 210 |
| May | 305 |
</Chart>

line

Points by roundPoints
05010015012345
  • Antonelli
  • Russell
  • Hamilton
Points by roundPoints
050100150135
  • Antonelli
  • Russell
  • Hamilton
Points by roundPoints
050100150135
  • Antonelli
  • Russell
  • Hamilton
Points by round
RoundAntonelliRussellHamilton
1251815
2433627
3685145
4936957
51119470
The model's answer
<Chart type="line" title="Points by round" x="Round" y="Points">
| Round | Antonelli | Russell | Hamilton |
|---|---|---|---|
| 1 | 25 | 18 | 15 |
| 2 | 43 | 36 | 27 |
| 3 | 68 | 51 | 45 |
| 4 | 93 | 69 | 57 |
| 5 | 111 | 94 | 70 |
</Chart>

area

Visitors this weekVisitors
1.2k1.4k1.6k1.8k2kMonTueWedThuFri
Visitors this weekVisitors
1.2k1.4k1.6k1.8k2kMonWedFri
Visitors this weekVisitors
1.2k1.4k1.6k1.8k2kMonWedFri
Visitors this week
DayVisitors
Mon1,200
Tue1,450
Wed1,380
Thu1,720
Fri1,960
The model's answer
<Chart type="area" title="Visitors this week" y="Visitors">
| Day | Visitors |
|---|---|
| Mon | 1,200 |
| Tue | 1,450 |
| Wed | 1,380 |
| Thu | 1,720 |
| Fri | 1,960 |
</Chart>

stacked

Tickets by priority
020406080W1W2W3W4
  • High
  • Medium
  • Low
Tickets by priority
020406080W1W2W3W4
  • High
  • Medium
  • Low
Tickets by priority
020406080W1W3
  • High
  • Medium
  • Low
Tickets by priority
WeekHighMediumLow
W1122230
W292534
W3141928
W472131
The model's answer
<Chart type="stacked" title="Tickets by priority">
| Week | High | Medium | Low |
|---|---|---|---|
| W1 | 12 | 22 | 30 |
| W2 | 9 | 25 | 34 |
| W3 | 14 | 19 | 28 |
| W4 | 7 | 21 | 31 |
</Chart>

horizontal

Course fill ratesFill %
0255075100CS 101 Intro toProgrammingBIO 150 GeneticsART 210 Modern ArtHistoryECO 120 Microeconomics
Course fill ratesFill %
0255075100CS 101 Intro toProgrammingBIO 150 GeneticsART 210 Modern ArtHistoryECO 120 Microeconomics
Course fill ratesFill %
0255075100CS 101 Intro toProgrammingBIO 150 GeneticsART 210 ModernArt HistoryECO 120Microeconomics
Course fill rates
CourseFill %
CS 101 Intro to Programming98
BIO 150 Genetics89
ART 210 Modern Art History78
ECO 120 Microeconomics71
The model's answer
<Chart type="horizontal" title="Course fill rates" y="Fill %">
| Course | Fill % |
|---|---|
| CS 101 Intro to Programming | 98 |
| BIO 150 Genetics | 89 |
| ART 210 Modern Art History | 78 |
| ECO 120 Microeconomics | 71 |
</Chart>

scatter

Price against ratingRating
3.544.55050100150200250
Price against ratingRating
3.544.55050100150200250
Price against ratingRating
3.544.55050100150200250
Price against rating
PriceRating
494.1
793.6
1294.8
1994.4
2494.6
The model's answer
<Chart type="scatter" title="Price against rating" x="Price ($)" y="Rating">
| Price | Rating |
|---|---|
| 49 | 4.1 |
| 79 | 3.6 |
| 129 | 4.8 |
| 199 | 4.4 |
| 249 | 4.6 |
</Chart>

pie

Traffic sources
  • Search56%
  • Social22%
  • Direct16%
  • Email6%
Traffic sources
  • Search56%
  • Social22%
  • Direct16%
  • Email6%
Traffic sources
  • Search56%
  • Social22%
  • Direct16%
  • Email6%
Traffic sources
SourceVisits
Search5,400
Social2,100
Direct1,500
Email600
The model's answer
<Chart type="pie" title="Traffic sources">
| Source | Visits |
|---|---|
| Search | 5,400 |
| Social | 2,100 |
| Direct | 1,500 |
| Email | 600 |
</Chart>

donut

Customers by plan
  • Free49%
  • Pro32%
  • Team19%
Customers by plan
  • Free49%
  • Pro32%
  • Team19%
Customers by plan
  • Free49%
  • Pro32%
  • Team19%
Customers by plan
PlanCustomers
Free1,842
Pro1,214
Team702
The model's answer
<Chart type="donut" title="Customers by plan">
| Plan | Customers |
|---|---|
| Free | 1,842 |
| Pro | 1,214 |
| Team | 702 |
</Chart>

radar

Player skills
SpeedPowerAccuracyStaminaTeamwork
  • Alex
  • Sam
Player skills
SpeedPowerAccuracyStaminaTeamwork
  • Alex
  • Sam
Player skills
SpeedPowerAccuracyStaminaTeamwork
  • Alex
  • Sam
Player skills
SkillAlexSam
Speed86
Power69
Accuracy97
Stamina78
Teamwork87
The model's answer
<Chart type="radar" title="Player skills">
| Skill | Alex | Sam |
|---|---|---|
| Speed | 8 | 6 |
| Power | 6 | 9 |
| Accuracy | 9 | 7 |
| Stamina | 7 | 8 |
| Teamwork | 8 | 7 |
</Chart>

FollowUps

Suggested next questions the user can tap.

Between its tags: a Markdown list.

The model's answer
<FollowUps>
- What's the cheapest way to get to Sintra?
- Find me a fado house that isn't touristy
- Plan day two around the rain forecast
</FollowUps>

Form

Groups fields; its Button submits them.

Between its tags: Markdown and other components.

Attribute Type Required Values
name text

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Input

A one-line text field.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
name text
type one of text (default), email, number, password, url, tel, search, date, time, datetime-local
placeholder text
value text
step number
min number
max number
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

TextArea

A multi-line text field.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
name text
placeholder text
value text
rows number
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Select

A dropdown.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
options values split by ` ` yes
name text
placeholder text
value text
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Date

A date picker.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
name text
value text
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Slider

Pick a number in a range, shown with its unit ($, %, km).

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
min number yes
max number yes
step number
value number
name text
unit text

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Checkboxes

Pick any number of options.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
options values split by ` ` yes
name text
value values split by ` `
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Radio

Pick one option.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
options values split by ` ` yes
name text
value text
hint text
required true or false

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Switch

An on/off toggle.

Between its tags: nothing: it closes itself (<Name ... />).

Attribute Type Required Values
label text yes
name text
value true or false
hint text

Book a demo

Tell us about your team

Interested in
Plan
The model's answer
<Card title="Book a demo" subtitle="Tell us about your team">
<Form name="demo-request">
<Input label="Full name" name="name" placeholder="Jane Smith" required="true" />
<Input label="Work email" name="email" type="email" placeholder="jane@company.com" hint="We only use this to reply" required="true" />
<Select label="Team size" name="size" placeholder="Choose a range" options="1-10 people | 11-50 people | 51+ people" />
<Date label="Preferred date" name="date" />
<Slider label="Seats" name="seats" min="1" max="50" value="8" />
<Checkboxes label="Interested in" name="interests" options="Analytics | Billing | Support inbox" value="Analytics" />
<Radio label="Plan" name="plan" options="Cloud, managed by us | Self-hosted in your infra" value="Cloud, managed by us" />
<TextArea label="Anything else?" name="notes" placeholder="Your current tools, deadlines..." rows="3" />
<Switch label="Send me the product newsletter" name="newsletter" />
<Button>Request demo</Button>
<Button variant="tertiary">Cancel</Button>
</Form>
</Card>

Button

In a Form it submits; elsewhere href opens a link and ask sends a message (the label by default); the label goes between the tags or in label.

Between its tags: inline text: its label.

Attribute Type Required Values
variant one of primary (default), secondary, tertiary, danger
href address
ask text
disabled true or false
size one of medium (default), small, large
label text
icon icon name
Export CSVShare reportCompare with Q2Delete projectSmallLarge
The model's answer
<Button icon="download-simple">Export CSV</Button>
<Button variant="secondary" icon="share-network">Share report</Button>
<Button variant="tertiary" ask="Compare this with last quarter">Compare with Q2</Button>
<Button variant="danger">Delete project</Button>
<Button size="small" variant="secondary">Small</Button>
<Button size="large">Large</Button>
<Button disabled="true">Not yet</Button>