ButtonsPrimarySecondaryDangerSkip to contentCards
Text passed by the slot.
Containers
I'm a responsive container. My size is only limited by the size of my
parent container.
I'm a large, centred container. My max size is 64rem (1024px).
I'm an extra-small container. My max size is 20rem (320px).
Details
Details about stuff.
Form elements (including stepper and error summary)
Section title
GridsSimple gridsFluid grid
Each grid column takes up a fractional amount of space within the grid
and has no fixed width restrictions. The grid and its columns scale to
the size of the viewport. This example has 4 columns for large
viewports, 2 columns for medium viewports, and 1 column for smaller
viewports.
This is some example content to display the grid component.
This is some example content to display the grid component.
This is some example content to display the grid component.
Fixed grid
In fixed width grids each grid column has a fixed minimum and a maximum
width to limit how wide they will span on any screen size. The columns
scale until they either reach their minimum or their maximum width. Once
a grid column reaches its minimum width, it gets moved to the next row
if the space on the current row becomes smaller than its minimum width.
In this example each grid column has a minimum width of 100px and a
maximum width of 300px.
This is some example content to display the grid component.
This is some example content to display the grid component.
This is some example content to display the grid component.
Hybrid grid
Hybrid grid columns include either a minimum or a maximum width and one
fractional width. In this example each grid column is responsive with a
minimum width of 400px and no maximum width which means it takes up the
available space.
This is some example content to display the grid component.
This is some example content to display the grid component.
Individually sized grid
When using individually sized grid columns, the grid columns define
their own size. Each grid column can define a base, tablet (optional)
and desktop (optional) size.
Base: 1/1, tablet: 3/6, desktop: 6/12
Base: 1/1, tablet: 3/6, desktop: 6/12
Base: 1/1, tablet: 6/6, desktop: 4/12
Base: 1/1, tablet: 6/6, desktop: 4/12
Base: 1/1, tablet: 6/6, desktop: 4/12
B: 1, t: 2, d: 3
Base: 1/1, tablet: 2/6, desktop: 6/12
B: 1, t: 2, d: 3
Base + tablet + desktop full width
HeadingHeading level 1Heading level 2Heading level 3Heading level 4Heading level 5Heading level 6TextThis text is primary text using the default body size. The margin
bottom is set to "400". The character limit is set to "true" (default
value) which means that the text will take up a maximum of 65 characters
per line.This text is primary text using the default body size. The margin
bottom is set to "400". The characters limit is set to "false" which
means that the text will take up all available space.This text is secondary text using the default body size. The margin
bottom is set to "400". The character limit is set to "true" (default
value) which means that the text will take up a maximum of 65 characters
per line.
This text is light text using the default body size. The character
limit is set to "true" (default value) which means that the text will
take up a maximum of 65 characters per line.
This text is primary text using the caption size. The margin bottom is
set to "400". The character limit is set to "true" (default value) which
means that the text will take up a maximum of 65 characters per
line.This text is primary text using the default body size
with some bold text included. The margin bottom is set
to "400". The character limit is set to "true" (default value) which
means that the text will take up a maximum of 65 characters per
line.This text is primary text using the default body size
with some italic text included. The margin bottom is set to
"400". The character limit is set to "true" (default value) which means
that the text will take up a maximum of 65 characters per
line.IconsFixed width icons (square ratio)Variable width icons (auto width)Links
This is a small link if you
compare it to regular text.
This is an external link.
This is a
download link (PDF, 1.3 MB)
with type indicated
Contact us
via email
or by phone.
Contact us by phone or by
email.
There is text before and
(sample link)
after this link.
This is a sample link with a referrerpolicy.
Click me!
This is a link using the light link role.
PaginationPhase banner
Exciting announcement.
Screen reader onlyThere is invisible text below this
This text is only available to assistive technologies.
Side navigationInstallationFoundationsComponentsSiteGitHubSiteGitHubSlackTop navigationHomeInstallationFoundationsComponentsFormGitHubSlack2023-01-26