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.

Button link

Show a button as a simple link with an underline on hover. The button has no background or padding.

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 usage

We use the default behavior from the details/summary HTML elements. This means that the component will have a chevron by default and it can have multiple open accordions at once.
Question 1
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.
Question 2
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.
Single open 1
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.
Single open 2
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 custom icon

By default the component will have a chevron that rotates when the open state is true. You can also use this component with a custom icon if you prefer that.
Question 1
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.
Question 2
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 without icon

By default the component will have an chevron that rotates when the open state is true. You can also use this component without using an icon.
Question 1
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.
Question 2
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.

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.

Inline

This component is a variant for the read more / read less component. This content has a default line-clamp-1, the buttons will show inside the text instead of below the text.

Inline

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