Shards
A modern UI toolking for web makets.
A PRODUCT BY
Shards is a modern design system based on Bootstrap 4 that comes packed with 10
extra custom components and two pre-built landing pages. It’s also lightweight with
its stylesheet weighting only ~12kb minified and gzipped.
Colors
We've enhanced Bootstrap’s semantic color selection with brighter color variations in
order to improve the contrast and accessibility.
Primary
#0067f4
Secondary
#5A6169
Success
#17c671
info
#00b8d8
Warning
#ffb400
Danger
#C4183c
Light
#e9ecef
Dark
#212529
Typography
We've enhanced Bootstrap’s semantic color selection with brighter color variations in
order to improve the contrast and accessibility.
Icon Packs 🦄
Shards supports by default both Material and FontAwesome packs. Icons can be placed in
almost any element without the need of modifying the kit.
Material Icons
Over 900+ Icon
Font Awesome
Over 600+ Icon
Form Controls
All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.
Simple Forms
Custom Controls
The default custom form fields are improved and extended. One of the new additions being the toggle switch control.
Checkboxes
Radio Buttons
Toggles
Cards
We wanted cards to stand out and bring depth without changing their original structure. All of this while allowing them to play well with the other components.
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read More
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read More
Sample Card Title
He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed in his length hid...
Read MoreAlert
Hey! I think you should know this.
Yay! Everything is fine!
Oops! Something might be wrong
On no! Something really bad happened!Extras
That's not all! We've prepared two free landing pages built using mostly Shards and
some custom styling to help you start your next project faster.
components and how to use them.
come up with! If you like Shards, make sure you share it with your friends too!
Share on Twitter
Share on Facebook
Share on Linkedin