General UI Elements

Accordion

Accordion Content #1

Accordion Content #2

Accordion Content #3

Alerts

Badge

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New


Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark

Button




Button Group

Collapsibles

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Dropdowns

List Group

Navbar

Pagination



Placeholder

Progress Bar

Toast

Tooltip

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

Spinner
Loading...
Loading...
Loading...
Loading...
Loading...

Timeline

10 Feb. 2023
12:05

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed repellendus possimus iste dolore ut rerum, error quasi suscipit accusantium dolorem nam fugiat omnis corrupti nobis perferendis placeat atque dolor dolorum.
5 mins ago

John Doe accepted your friend request

27 mins ago

Smith Rogan purchased 5 items

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut non, tempora.
3 Jan. 2025
2 days ago

Spike Lee added as a new user

... ... ... ...

Cards

150

New Orders

More info

53%

Bounce Rate

More info

44

User Registrations

More info

65

Unique Visitors

More info

Cards: Collapsible

Expandable

The body of the card

Collapsable

The body of the card

Removable

The body of the card

Maximizable

The body of the card