Shards

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

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 meDon'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...