Rapidez Blade Components preview

Button components

Primary & Secondary button

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.

Mobile only accordion

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.

  1. Christian Bale
  2. Ben Affleck
  3. Robert Pattinson
I am vengeance, I am the night, I am Batman.
Movie Score Year
Batman Begins 8.2 2005
The Dark Knight 9.0 2008
The Dark Knight Rises 8.4 2012