Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Author nameAccessible components
This theme includes comprehensive accessibility components from the Accessible Astro Components NPM package to accelerate accessible development. For detailed documentation and usage examples, visit our documentation website. Additional components are available in the theme's components directory. Note: accessibility tools like aXe may report issues due to the static demonstration of the components on this page.
Accordion
The Accordion component is used to show and hide content. It's a great way to keep your page clean and accessible.
Default
First Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Tab to me!Second Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Third Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Fourth Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Fifth Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Chevron
First Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Tab to me!Second Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Third Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Fourth Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Fifth Item
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur.
Avatar
The Avatar component is used to display a user's profile picture. It can be used as a standalone component or as part of an AvatarGroup.
Default
MT
PP
With title and subtitle
Mark Teekman
Developer & A11Y Expert
Avatar group
DV
DS
PM
MK
MK
Badge
The Badge component is used to display a badge with a type and a pulse effect.
Default
Default Info Success Warning Error
Notification
3
5
2
Interactive
New feature (pulse)
Breadcrumbs
The Breadcrumbs component is used to display a list of breadcrumbs.
Default
With icons
With custom separator
With custom home icon
Button
The Button component is used to display a button with a type and a pulse effect.
Default
Outline
Sizes
Icon
Card
The Card component is used to display a card with a title, footer, and a media.
Dark mode toggle
The Dark mode toggle component is used to toggle the dark mode of the page.
Default
Custom icons
Form
The Form component is used to display a form with a name, email, message, and a submit button. It has WCAG 2.2 AA compliant validation by default.
Heading
Headings are used to structure the content of a page. They should be used in the following order:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Link
The Link component is used to display a link with a type and a color.
Default
Default linkExternal
External link Opens in a new tabLink as button
Default button link Primary button link Secondary button link Info button link Success button link Warning button link Error button link
Outline button
Outline primary button link Outline secondary button link Outline info button link Outline success button link Outline warning button link Outline error button link
Icon
Media
Modals
The Modals component is used to display a modal with a title and a content.
Notification
The Notification component is used to display a notification with a type and a message.
Default
Message: This is a notification!
Info: This is a notification of type info.
Success: This is a notification of type success.
Warning: This is a notification of type warning and goes on multiple lines to see how that looks.
Error: This is a notification of type error.
Accent
Pagination
The Pagination component is used to display a pagination with a total number of pages.
Skip link
The SkipLink component becomes visible when you shift+tab to navigate backward through the page, it's the first focusable element on the page.
Tabs
The Tabs component is used to display a tabs with a list of tabs and a list of panels.
First Panel
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo accusantium debitis sapiente obcaecati magnam incidunt sit. Molestiae exercitationem quibusdam quod veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet quidem earum at nobis enim.
Tab to me!
Video
The Video component is used to display a video with a title and a source.