These buttons use theme colors; primary and secondary.
If you change the color in your project, the buttons will update as well.
Default & Outline button
The default button is the default button. Nothing special, it is not recommended to use this button,
but if you would like to use the button, it is possible. The outline button doesn't have a background and only
contains a border.
Conversion & Rounded button
The conversion button is used for anything conversion related, like adding to cart or inside a checkout.
The rounded button is a variant that you can use for slider navigation.
Input components
Text Fields
Text fields can be used with or without label.
When you add a required attribute, the label will be marked with an asterisk.
Selectors
These fields can be used with or without label.
When you add a required attribute, the label will be marked with an asterisk.
Slideover Component
Default
Example Slideover
This is an example of the slideover component.
You can put any content here!
Right-positioned
Right Slideover
This slideover appears from the right side.
It demonstrates the position property.
Mobile only
Mobile Slideover
This is a mobile-specific slideover that transforms on desktop.
On mobile devices, it appears as a slideover.
On desktop screens (lg breakpoint and above), this content is directly embedded in the page instead of being in a slideover.
Accordion component
Default & radio accordion
The default accordion uses a checkbox, so you can have multiple accordions open at the same time.
The radio variant makes use of a radio button, so you can open only one accordion at a time.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Accordion with rotating chevron & background
These accordions are more advanced. They contain an arrow that rotates when the accordion is open.
It is also possible to have an accordion with content inside that has a background colour.
This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class.
When you click the header, the chevron will rotate 180 degrees.
This is only an accordion on mobile devices. On desktop, it's always open.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
Read more component
Read more / Read less
This component is useful for long texts. It will automatically add a button if the text is too long.
Resize the window to see button show and hide.
Long text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates. Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates.
Short text
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, repellat incidunt placeat. Quo accusantium laudantium, adipisci culpa ad enim dolores molestiae alias ducimus officiis labore facilis modi provident cupiditate? Voluptates.
Prose component
Wayne Enterprises
Wayne Foundation
Bat Bunker
Batcave
Wayne Enterprises, Inc., also known as WayneCorp and Wayne Industries, is a wealthy fictional company appearing in American comic books published by DC Comics, commonly in association with the superhero Batman. Wayne Enterprises is a large, growing multinational company.