Vetstoria Design System
Logo
Typeface
| Left Align | Center Align | Right Align |
|---|---|---|
Hero |
Hero |
Hero |
Heading 1 |
Heading 1 |
Heading 1 |
Heading 2 |
Heading 2 |
Heading 2 |
Heading 3 |
Heading 3 |
Heading 3 |
Heading 4 |
Heading 4 |
Heading 4 |
Heading 5 |
Heading 5 |
Heading 5 |
Heading 6 |
Heading 6 |
Heading 6 |
Parahraph Hader
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat tempora maiores dolor odio perspiciatis placeat aut praesentium facilis, exercitationem beatae sequi expedita, aliquid rem. Dicta reprehenderit sequi odio totam!
Buttons
| Type | Primary | Secondary | Tertiary |
|---|---|---|---|
| Default | |||
| Status | |||
| Icon button with caption | |||
| Icon button with background | |||
| Icon button with transparent background | |||
| Link | Secondary link | Tertiary link |
Feedback buttons
Table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Card
Card header
Breadcrumb
Tabs
Badges
Status labels
Primary Secondary Infor Success Warning Error DisableStatus pills
Primary Secondary Infor Success Warning Error DisableStatus circle and caption
Primary Secondary Info Success Warning Error DisableStatus circle
Status outline
Primary Secondary Info Success Warning Error DisableStatus outline pills
Primary Secondary Info Success Warning Error DisableNotification
Toast
Toast multiline
Info message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Error message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Alert
Alert multiline
Info message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Success message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Warning message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Error message
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.