# Core components > The core pack's 25 components: always included: layout, text blocks, numbers, charts, forms and buttons. 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. ```markdown ## 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 `code LISBOA10` 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 | | | ```markdown Flights are booked. What's left is the hotel, food and two day trips, about **€740** in all. ``` ## Columns Puts its children side by side, stacking on narrow screens. Between its tags: Markdown and other components. ```markdown Three nights in Chiado, breakfast included. Check-in from 15:00. TP 1351 out on Friday 08:40, TP 1358 back on Monday 19:15. A Viva Viagem card covers trams, metro and the river ferries. ``` ## Tabs One panel per Tab. Between its tags: only `Tab` components. ```markdown 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. ``` ## Tab A panel inside Tabs. Between its tags: Markdown and other components. It goes inside `Tabs`. | Attribute | Type | Required | Values | |---|---|---|---| | `title` | text | yes | | ```markdown 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. ``` ## 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 | | | ```markdown
Weekend rates in Chiado run about 30% higher, and this weekend there's a football match at the Estádio da Luz.
Free cancellation until 48 hours before check-in. After that the first night is charged.
``` ## Steps An ordered sequence or timeline. Between its tags: only `Step` components. ```markdown Reply to the hotel's email with the arrival time. ``` ## 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 | | | ```markdown Reply to the hotel's email with the arrival time. ``` ## 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 | | | ```markdown Museums are free on Sunday mornings for residents only, so check the ticket rules. Your table at Taberna Sal Grosso is confirmed for 20:30. Metro staff plan a partial strike from 06:30 to 10:30. It must be valid for three months after your return date. Prices are in euros and include VAT. ``` ## Stat One key number, its unit inside value ("3.7 km", "$1,204"). Between its tags: nothing: it closes itself (``). | 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 | | | ```markdown ``` ## 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` | ```markdown Order **#4821** is Shipped, invoice Overdue, return window 14 days, payment Failed, label Draft. ``` ## Progress A progress bar. Between its tags: nothing: it closes itself (``). | Attribute | Type | Required | Values | |---|---|---|---| | `value` | number | yes | | | `max` | number | | default `100` | | `label` | text | | | | `tone` | one of | | `neutral` (default), `info`, `success`, `warning`, `danger` | ```markdown ``` ## Avatar A person's picture or initials, with their name. Between its tags: nothing: it closes itself (``). | Attribute | Type | Required | Values | |---|---|---|---| | `name` | text | yes | | | `src` | address | | | | `subtitle` | text | | | ```markdown ``` ## Gallery A grid of images. Between its tags: Markdown images, one a line. ```markdown ![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) ``` ## 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 ```markdown | Month | Signups | |---|---| | Jan | 120 | | Feb | 180 | | Mar | 240 | | Apr | 210 | | May | 305 | ``` ### line ```markdown | Round | Antonelli | Russell | Hamilton | |---|---|---|---| | 1 | 25 | 18 | 15 | | 2 | 43 | 36 | 27 | | 3 | 68 | 51 | 45 | | 4 | 93 | 69 | 57 | | 5 | 111 | 94 | 70 | ``` ### area ```markdown | Day | Visitors | |---|---| | Mon | 1,200 | | Tue | 1,450 | | Wed | 1,380 | | Thu | 1,720 | | Fri | 1,960 | ``` ### stacked ```markdown | Week | High | Medium | Low | |---|---|---|---| | W1 | 12 | 22 | 30 | | W2 | 9 | 25 | 34 | | W3 | 14 | 19 | 28 | | W4 | 7 | 21 | 31 | ``` ### horizontal ```markdown | Course | Fill % | |---|---| | CS 101 Intro to Programming | 98 | | BIO 150 Genetics | 89 | | ART 210 Modern Art History | 78 | | ECO 120 Microeconomics | 71 | ``` ### scatter ```markdown | Price | Rating | |---|---| | 49 | 4.1 | | 79 | 3.6 | | 129 | 4.8 | | 199 | 4.4 | | 249 | 4.6 | ``` ### pie ```markdown | Source | Visits | |---|---| | Search | 5,400 | | Social | 2,100 | | Direct | 1,500 | | Email | 600 | ``` ### donut ```markdown | Plan | Customers | |---|---| | Free | 1,842 | | Pro | 1,214 | | Team | 702 | ``` ### radar ```markdown | Skill | Alex | Sam | |---|---|---| | Speed | 8 | 6 | | Power | 6 | 9 | | Accuracy | 9 | 7 | | Stamina | 7 | 8 | | Teamwork | 8 | 7 | ``` ## FollowUps Suggested next questions the user can tap. Between its tags: a Markdown list. ```markdown - 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 ``` ## Form Groups fields; its Button submits them. Between its tags: Markdown and other components. | Attribute | Type | Required | Values | |---|---|---|---| | `name` | text | | | ```markdown