Button Base
Primarily used for interface interactions. Has a lot of variations and semantic power.
Components
User interface components with their markup and applied classes. All of these are pre-styled in our theme.
Link to section titled: Buttons
Buttons
Link to section titled: Form Elements
Form Elements
Link to section titled: Input Fields
Input Fields
-
Base Input
Basic text input with a label and optional hint(s) and error(s). Use it for short text inputs like names and emails.
-
Checkbox Input
Checkbox inputs are used for agreeing or enabling features.
-
Checkbox Input Field
Oftentimes the best choice for selecting multiple options out of a few. Prefer over selects for 2-5 options.
-
Date Input
Use date inputs to collect single dates. Can be hooked up to a button to set the date for today. Builts on browser built-in date picker.
-
Radio Input Field
Oftentimes the best choice for selecting one option out of a few. Prefer over selects for 2-5 options.
-
Range Input
Prefer the range input over a standard number input for easier adjustments. Usually not as precise. Display the currently selected value below or group with a number input for the best of both worlds.
-
Segmented control
A styled radio control. Use when you have a small amount of options (2-5). Can be used for on/off switches. Has intrinsic sizing and switches between column and row.
-
Select
Selects are useful for when you have more than 5 items, but still a managable amount.
-
Switch Input
Basically a checkbox, but designed in a typical on/off way
-
Tag Select Field
Shows multiple options as tags or chips. Styles can be adjusted. Use it to show lots of short options.
-
Textarea
Use a textarea for longer text inputs, like descriptions or bios. Allows for multiple lines.
Link to section titled: Data Display
Data Display
-
Descriptions List
Description lists are a way to organize and explain related information. Use it when you need to list and define terms such as in a glossary.
-
Meta List
Display tags and meta data for posts and alike, like date, author, and tags. Has intrinsic sizing.
-
Tables
Tables should be used for tabular data. They can easily hold a lot of data and group it together clearly and semantically correct.
Link to section titled: Feedback
Feedback
Link to section titled: Layouts
Layouts
-
Box
It's a padded box, and an optional border. Can be wrapped around most content and serves as a standardised way to display content.
-
Center
Center content horizontally. Use it as a layout wrapper or to center content inside a parent. Will take exact size given.
-
Cluster
Flow it's children horizontally and spaces it equally. Usually allows wrapping. The horizontal content sibling of the stack.
-
Flow
Create a vertical rhythm section for text layouts. Nicely spaces headlines, paragraphs and imaages. Think of it as a standard blog layout.
-
Gallery
A horizontal, scrollable gallery. Uses mandatory scroll snap stops by default. Use it for image galleries, content carousels or slides.
-
Grid
Align content in a grid. Default is a responsive autofil-grid, aka RAM grid, but can be used with modifers create 2- or 3-column layouts.
-
Pile
Pile items on top of each other. Prefer this over position: absolute.
-
Region
A consistently spaced section to bring some white space to your blocks. Used in most website layouts.
-
Stack
Stack content vertically in a column and space it equally. Since most websites are built this way, it's basic building block.
-
Switcher
Allows to to layout three items next to each other, until there is not enough horizontal space. Will then switch to a column layout.
-
With Sidebar
Place two containers side by side. The main content (data-grow) has a min size and will grow, the aside content (data-aside) a target size. If there is no more space for the min size, it will wrap.
Link to section titled: Custom Components
Custom Components
-
Sparkline
This is an inline Sparkline:
This is an large Sparkline:
This is an large Sparkline as line only:
This is an inline Sparkline in svelte: