Design System
Design System
Design System
Design System
Classes and styles
Click any buttons to increment the count
Buttons
Count: 0
The classes are custom made
Normal Buttons
Button Icons
Icon buttons with different styles:
<button class="btn icon-left btn-primary">
<Icon name="akar-icons:arrow-left" class="size-6" />
Button
</button>
<button class="btn icon-right btn-primary">
Button
<Icon name="akar-icons:arrow-right" class="size-6" />
</button>
btn
btn btn-primary
btn btn-secondary
btn btn-success
btn btn-danger
btn btn-warning
btn btn-info
btn btn-light
btn btn-dark
Icons
We use Nuxt icons
<button class="btn btn-icon">
<Icon name="akar-icons:arrow-left" class="size-6" />
</button>
Components
Color Picker
Live Preview
v-model Value
{
"r": 21,
"g": 128,
"b": 251,
"a": 1
}Repair Status Tags
In the Wind
On the Forge
Sails Up
Scuttled
Awaitin’ Bits
Awaitin’ Fetch
Awaitin’ the Smith
Service Cards
Service 1
This is a description
Lost at Sea
Spy More
Service 2
This is a description
All Hands
Ready fer Plunder
Jesus
Christ
God
Holy Spirit
Spy More
Content goes here
Service Dropdown
Pick a Service, Matey
Be choosin’ a service from the list, arr!
Separated media viewer
Modal
Toast
Media Viewer
Common Tags
Tag 1
Available
Unavailable
Personal
Enterprise
Both
PINK!
Code puncher
Other
IP Address Fetcher
Toggle IP Address