# Shards

A modern UI toolkit for web makers.

Download Now Learn More

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.

Share
Follow Tweet Star

### 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

Shards uses Poppins as its primary typeface for headings and the system’s UI font with a Roboto-first fallback (only on non-Apple devices) for the remaining content.

Type | Example | Font | Font Size | Line Height
--- | --- | --- | --- | ---
Heading 1 | # ABCabc | Poppins Semibold | 3.052 REM | 3 REM
Heading 2 | ## ABCabc | Poppins Medium | 2.441 REM | 2.25 REM
Heading 3 | ### ABCabc | Poppins Medium | 1.953 REM | 2.25 REM
Paragraph | ABCabc | System UI / Roboto | 1 REM | 1.5

## 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+ Icons

## Font Awesome

##### Over 600+ Icons

### Form Controls

All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user experience.

##### Simple Forms

Name
Email
Password
State
Zip

##### Using Icons

Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default or seamlessly integrated input group addons.

###### Seamless

###### Default

##### Custom Controls

The default custom form fields are improved and extended. One of the new additions being the toggle switch control.

###### Checkboxes

Pizza
Pasta
Burgers
Tacos

###### Radio Buttons

Cookies
Pancakes
Chocolate
Milkshake

###### Toggles

Rockets
Lasers
HAL 9K
Ultron

###### Custom Dropdown

###### Custom File Input

##### Validation

Form validation is also improved to match the new overall form feel, while following the same interaction principles for consistency.

First name
Last name
City
Invalid city
State
Invalid state
Zip
Invalid ZIP code
Photo ID Scan
Favourite Number
Do you agree to our terms & conditions?
Subscribe me Don't subscribe me

### Sliders

Sliders are also a new custom control and can be integrated almost anywhere with minimal markup (a single element) and extended customisation options via JavaScript.

### Datepickers

Datepickers are also available and similar to slider controls they are very easy to create, being based on a single input element. Datepickers are customisable as well, letting you create complex configurations with range selections for example.

Date of Birth
Employment Period
to

### 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 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

### Buttons

Two new button modifiers are introduced in Shards that allow you to create pill-shaped and squared buttons for both filled and outlined variations for an extended range of possible combinations.

##### Normal

##### Squared

##### Pill-shaped

##### Using Icons

### Progress Bars

In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.

###### Widths

###### Labels

20%
50%
70%

### Modals

Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.

##### 🤔 Think about it

Triggering this action might affect you later. Do you still want to continue?

### Badges

Badges are similar to buttons and are available in all theme colors with filled and outlined modes and also with three variation styles: rounded, pill-shaped and squared.

Primary Secondary Success Danger Warning Info

### Tooltips & Popovers

Don't let your uses guess by attaching tooltips and popoves to any element. Just make sure you enable them first via JavaScript.

##### Tooltips

##### Popovers

### Alerts

Hey! I think you should know this.
Yay! Everything is fine!
Oops! Something might be wrong
On no! Something really bad happened!

### Navbars

Create beautiful, bold and responsive navbars using the same Bootstrap 4 markup structure you already know and love.

# 🎁

### 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.

###### Mobile App Promo

###### Agency Landing Page

# 📘

### Read the Docs

Make sure you check out the documentation and learn more about all the available components and how to use them.