shards-ui
Version:
A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.
1,038 lines (948 loc) • 77.5 kB
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shards Demo - A free and modern UI toolkit for web makers</title>
<meta name="description" content="A free and modern UI toolkit for web makers based on the popular Bootstrap 4 framework.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/shards.min.css?v=2.0.1">
<link rel="stylesheet" href="css/shards-demo.min.css?v=2.0.1">
</head>
<body>
<div class="loader">
<div class="page-loader"></div>
</div>
<!-- Floating Shards -->
<img src="images/demo/shard-1-5x-3.png" alt="Shard" class="shard">
<!-- Welcome Section -->
<div class="welcome d-flex justify-content-center flex-column">
<div class="inner-wrapper mt-auto mb-auto">
<h1 class="slide-in">Shards</h1>
<p class="slide-in">A modern UI toolkit for web makers.</p>
<div class="action-links slide-in">
<a href="https://designrevision.com/downloads/shards" class="btn btn-primary btn-pill align-self-center mr-2">
<i class="fa fa-download mr-1"></i> Download Now</a>
<a href="#" data-scroll-to="#introduction" id="scroll-to-content" class="btn btn-outline-light btn-pill align-self-center">Learn More</a>
</div>
</div>
<div class="product-by">
<a href="https://designrevision.com" target="_blank">
<p>A Product By</p>
<img src="https://dgc2qnsehk7ta.cloudfront.net/general/designrevision-logo.png" alt="DesignRevision - Making powerful tools for web professionals">
</a>
</div>
</div>
<!-- Page Content -->
<div class="page-content">
<!-- Content -->
<div class="content clearfix">
<div id="introduction" class="container mb-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<p class="lead">Shards is a modern design system based on Bootstrap 4 that comes packed with
<b>10 extra custom components</b> and
<b>two pre-built landing pages</b>. It’s also lightweight with its stylesheet weighting only
<b>~13kb minified and gzipped</b>.</p>
<div class="social-actions">
<div class="fb-like" data-href="https://www.facebook.com/designrevision" data-layout="button_count" data-action="like" data-size="large"
data-show-faces="false" data-share="false"></div>
<div class="fb-share-button" data-href="https://designrevision.com/download/shards" data-layout="button" data-size="large"
data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdesignrevision.com%2Fdownload%2Fshards&src=sdkpreparse">Share</a>
</div>
<a href="https://twitter.com/DesignRevision?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false" data-size="large"
data-show-screen-name="false">Follow</a>
<a class="twitter-share-button" href="https://twitter.com/share" data-size="large" data-text="I'm in love with Shards, a free Bootstrap 4 UI kit"
data-url="https://designrevision.com/downloads/shards" data-hashtags="ui,design,web,bootstrap" data-via="DesignRevision">
Tweet
</a>
<a class="github-button" href="https://github.com/designrevision/shards-ui" data-icon="octicon-star" data-show-count="true"
data-size="large" aria-label="Star designrevision/s on GitHub">Star</a>
</div>
</div>
</div>
<!-- Colors -->
<div id="colors" class="container mb-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Colors</h3>
<p>We've enhanced Bootstrap’s semantic color selection with brighter color variations in order to improve the contrast
and accessibility.</p>
</div>
<div class="example col-md-10 ml-auto mr-auto">
<div class="row">
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #0067f4"></div>
<span class="title">Primary</span>
<span class="hex-value">#0067f4</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #5A6169"></div>
<span class="title">Secondary</span>
<span class="hex-value">#5A6169</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #17c671"></div>
<span class="title">Success</span>
<span class="hex-value">#17c671</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #00b8d8"></div>
<span class="title">Info</span>
<span class="hex-value">#00b8d8</span>
</div>
</div>
</div>
<div class="row">
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #ffb400"></div>
<span class="title">Warning</span>
<span class="hex-value">#ffb400</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #c4183c"></div>
<span class="title">Danger</span>
<span class="hex-value">#c4183c</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #e9ecef"></div>
<span class="title">Light</span>
<span class="hex-value">#e9ecef</span>
</div>
</div>
<div class="color-wrapper col-lg-3 col-md-6 col-sm-6">
<div class="color">
<div class="swatch" style="background: #212529"></div>
<span class="title">Dark</span>
<span class="hex-value">#212529</span>
</div>
</div>
</div>
</div>
</div>
<!-- Typography -->
<div id="typography" class="container mb-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Typography</h3>
<p>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.</p>
</div>
<div class="example col-md-10 ml-auto mr-auto">
<table class="table table-striped table-responsive-md">
<thead>
<tr>
<th>Type</th>
<th>Example</th>
<th>Font</th>
<th>Font Size</th>
<th>Line Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heading 1</td>
<td>
<h1>ABCabc</h1>
</td>
<td>Poppins Semibold</td>
<td>3.052 REM</td>
<td>3 REM</td>
</tr>
<tr>
<td>Heading 2</td>
<td>
<h2>ABCabc</h2>
</td>
<td>Poppins Medium</td>
<td>2.441 REM</td>
<td>2.25 REM</td>
</tr>
<tr>
<td>Heading 3</td>
<td>
<h3>ABCabc</h3>
</td>
<td>Poppins Medium</td>
<td>1.953 REM</td>
<td>2.25 REM</td>
</tr>
<tr>
<td>Paragraph</td>
<td>
<p>ABCabc</p>
</td>
<td>System UI / Roboto</td>
<td>1 REM</td>
<td>1.5</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="py-5">
<!-- Icon Packs -->
<div id="icon-packs" class="container mb-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto mb-5">
<h2 class="text-center mb-4">Icon Packs 🦄</h2>
<p class="text-center">Shards supports by default both
<b>Material</b> and
<b>FontAwesome</b> packs. Icons can be placed in almost any element without the need of modifying the kit.</p>
</div>
</div>
<div class="icons-example clearfix mb-5">
<div class="icons-example-wrapper material-icons col-md-6 float-left">
<div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center ml-auto mr-auto py-5">
<img class="mb-4" src="images/demo/material-icons.svg" alt="Shards supports the Material Icons pack by default.">
<h2 class="text-light mb-2">Material Icons</h2>
<h5 class="text-muted mb-0">Over 900+ Icons</h5>
</div>
</div>
<div class="icons-example-wrapper font-awesome col-md-6 float-left">
<div class="material-icons col-lg-3 col-md-3 col-sm-12 d-table text-center mr-auto ml-auto py-5">
<img class="mb-4" src="images/demo/fontawesome-icons.svg" alt="Shards supports the FontAwesome Icons pack by default.">
<h2 class="text-light mb-2">Font Awesome</h2>
<h5 class="text-muted mb-0">Over 600+ Icons</h5>
</div>
</div>
</div>
</div>
<!-- Form Controls -->
<div id="forms" class="container mb-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Form Controls</h3>
<p>All form controls are improved with micro-transitions and shadows that bring depth and improve the overall user
experience.
</p>
</div>
<!-- Form Controls - Simple Forms: Default / Using Icons (Seamless) -->
<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
<h5>Simple Forms</h5>
<!-- Form Controls: Simple Forms -->
<div class="row mb-5">
<div class="col-md-12">
<form>
<div class="row">
<div class="form-group col-md-6">
<label for="form1-name" class="col-form-label">Name</label>
<input type="text" class="form-control" id="form1-name" placeholder="Name">
</div>
<div class="form-group col-md-6">
<label for="form1-email" class="col-form-label">Email</label>
<input type="email" class="form-control" id="form1-email" placeholder="Email">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<label for="form1-password">Password</label>
<input type="password" class="form-control" id="form1-password" placeholder="Password" required>
</div>
<div class="col-md-3 mb-4">
<label for="form1-state">State</label>
<select class="custom-select" id="form1-state">
<option value="" selected>Choose One</option>
<option value="1">California</option>
<option value="2">Virginia</option>
<option value="3">Texas</option>
<option value="4">Florida</option>
</select>
</div>
<div class="col-md-3 mb-4">
<label for="form1-zip">Zip</label>
<input type="text" class="form-control" id="form1-zip" placeholder="Zip" required>
</div>
</div>
</form>
</div>
</div>
<!-- Form Controls: Using Icons -->
<h5 class="mb-4">Using Icons</h5>
<p>Form controls can be stylised by utilizing icons from either supported packs. They can be placed inside default
or seamlessly integrated input group addons.</p>
<!-- Form Controls: Using Icons - Seamless -->
<div class="row mb-2">
<div class="col-12">
<h6 class="text-muted">Seamless</h6>
<form>
<div class="row">
<div class="form-group col-md-6">
<div class="input-group input-group-seamless">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</span>
<input type="text" class="form-control" id="form1-username" placeholder="Username">
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group input-group-seamless">
<input type="password" class="form-control" id="form2-password" placeholder="Password">
<span class="input-group-append">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- Form Controls: Using Icons - Default -->
<div class="row mb-2">
<div class="col-12">
<h6 class="text-muted">Default</h6>
<form>
<div class="row">
<div class="form-group col-md-6">
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
</span>
<input type="text" class="form-control" id="form2-username" placeholder="Username">
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<input type="password" class="form-control" id="form3-password" placeholder="Password">
<span class="input-group-append">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Form Controls: Custom Controls -->
<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
<div class="container">
<div class="row">
<h5 class="mb-4 w-100">Custom Controls</h5>
<p class="mb-5">The default custom form fields are improved and extended. One of the new additions being the
<strong>toggle switch</strong> control.</p>
</div>
<div class="row mb-5">
<div class="custom-controls-example col-md-3 col-sm-3 col-xs-12 pl-0">
<h6 class="text-muted mb-2">Checkboxes</h6>
<fieldset>
<div class="custom-control custom-checkbox d-block my-2">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Pizza</label>
</div>
</fieldset>
<fieldset>
<div class="custom-control custom-checkbox d-block my-2">
<input type="checkbox" class="custom-control-input" id="customCheck2" checked>
<label class="custom-control-label" for="customCheck2">Pasta</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-checkbox d-block my-2">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Burgers</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-checkbox d-block my-2">
<input type="checkbox" class="custom-control-input" id="customCheck4" checked>
<label class="custom-control-label" for="customCheck4">Tacos</label>
</div>
</fieldset>
</div>
<div class="custom-controls-example col-md-3 col-sm-3 col-xs-12">
<h6 class="text-muted mb-2">Radio Buttons</h6>
<fieldset>
<div class="custom-control custom-radio d-block my-2">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Cookies</label>
</div>
</fieldset>
<fieldset>
<div class="custom-control custom-radio d-block my-2">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" checked>
<label class="custom-control-label" for="customRadio2">Pancakes</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-radio d-block my-2">
<input type="radio" id="customRadio3" name="customRadioDisabled" class="custom-control-input">
<label class="custom-control-label" for="customRadio3">Chocolate</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-radio d-block my-2">
<input type="radio" id="customRadio4" name="customRadioDisabled" class="custom-control-input" checked>
<label class="custom-control-label" for="customRadio4">Pancakes</label>
</div>
</fieldset>
</div>
<div class="custom-controls-example col-md-4 col-sm-4 col-xs-12 pl-5">
<h6 class="text-muted mb-1">Toggles</h6>
<fieldset>
<div class="custom-control custom-toggle d-block my-2">
<input type="checkbox" id="customToggle1" name="customToggle1" class="custom-control-input">
<label class="custom-control-label" for="customToggle1">Rockets</label>
</div>
</fieldset>
<fieldset>
<div class="custom-control custom-toggle d-block my-2">
<input type="checkbox" id="customToggle2" name="customToggle2" class="custom-control-input" checked>
<label class="custom-control-label" for="customToggle2">Lasers</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-toggle d-block my-2">
<input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input">
<label class="custom-control-label" for="customToggle3">HAL 9K</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-toggle d-block my-2">
<input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
<label class="custom-control-label" for="customToggle4">Ultron</label>
</div>
</fieldset>
</div>
<div class="custom-controls-example col-md-2 col-sm-2 col-xs-12 pl-3">
<h6 class="text-muted mb-1">Sizes</h6>
<fieldset>
<div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
<input type="checkbox" id="customToggle1sm" name="customToggle1sm" class="custom-control-input">
<label class="custom-control-label" for="customToggle1sm">Rockets</label>
</div>
</fieldset>
<fieldset>
<div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
<input type="checkbox" id="customToggle2sm" name="customToggle2sm" class="custom-control-input" checked>
<label class="custom-control-label" for="customToggle2sm">Lasers</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
<input type="checkbox" id="customToggle3" name="customToggle3" class="custom-control-input">
<label class="custom-control-label" for="customToggle3">HAL</label>
</div>
</fieldset>
<fieldset disabled>
<div class="custom-control custom-toggle custom-toggle-sm d-block my-2">
<input type="checkbox" id="customToggle4" name="customToggle4" class="custom-control-input" checked>
<label class="custom-control-label" for="customToggle4">Ultron</label>
</div>
</fieldset>
</div>
</div>
<div class="row mb-5">
<div class="col-md-6 pl-0 custom-dropdown-example">
<h6 class="text-muted mb-3">Custom Dropdown</h6>
<fieldset>
<select class="custom-select w-100" required>
<option value="">Select Favourite Number</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</fieldset>
</div>
<div class="col-md-6 pl-0">
<h6 class="text-muted mb-3">Custom File Input</h6>
<fieldset>
<div class="custom-file w-100">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file...</label>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h5 class="mb-4">Validation</h5>
<p class="mb-4">Form validation is also improved to match the new overall form feel, while following the same interaction principles
for consistency.</p>
<form class="was-validated">
<div class="row">
<div class="col-md-6 mb-3">
<label for="form-2-first-name">First name</label>
<input type="text" class="form-control is-valid" id="form-2-first-name" placeholder="First name" value="Catalin" required>
</div>
<div class="col-md-6 mb-3">
<label for="form-2-last-name">Last name</label>
<input type="text" class="form-control is-valid" id="form-2-last-name" placeholder="Last name" value="Vasile" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="form-2-city">City</label>
<input type="text" class="form-control is-invalid" id="form-2-city" placeholder="City" required>
<div class="invalid-feedback">
Invalid city
</div>
</div>
<div class="col-md-3 mb-3">
<label for="form-2-state">State</label>
<input type="text" class="form-control is-invalid" id="form-2-state" placeholder="State" required>
<div class="invalid-feedback">
Invalid state
</div>
</div>
<div class="col-md-3 mb-3">
<label for="form-2-zip">Zip</label>
<input type="text" class="form-control is-invalid" id="form-2-zip" placeholder="Zip" required>
<div class="invalid-feedback">
Invalid ZIP code
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6 mb-3">
<label for="form-file-4">Photo ID Scan</label>
<div class="custom-file w-100">
<input type="file" class="custom-file-input" id="customFile2" required>
<label class="custom-file-label" for="customFile2">Choose file...</label>
</div>
</div>
<div class="col-md-6 mb-3">
<label class="d-block" for="form-3-select">Favourite Number</label>
<select class="custom-select w-100" id="form-3-select" required>
<option value="">Invalid select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="form-3-terms" required>
<label class="custom-control-label" for="form-3-terms">Do you agree to our terms & conditions?</label>
</div>
</div>
<div class="col-md-6">
<div class="custom-controls-stacked d-block">
<div class="custom-control custom-radio mb-1">
<input type="radio" id="radioStacked1" name="radio-stacked" class="custom-control-input" required>
<label class="custom-control-label" for="radioStacked1">Subscribe me</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" name="radio-stacked" class="custom-control-input" required>
<label class="custom-control-label" for="customRadio5">Don't subscribe me</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Sliders -->
<div id="sliders" class="container mb-5" style="padding-bottom: 1px">
<div class="my-5">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Sliders</h3>
<p>Sliders are also a new custom control and can be integrated almost anywhere with minimal markup
<i>(a single element)</i> and extended customisation options via JavaScript.</p>
</div>
<div class="example col-lg-8 col-md-10 ml-auto mr-auto mb-0">
<div class="row">
<div class="col-md-6 col-sm-12">
<div id="slider-example-1">
<input type="hidden" class="custom-slider-input">
<input type="hidden" class="custom-slider-input">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div id="slider-example-2">
<input type="hidden" class="custom-slider-input">
<input type="hidden" class="custom-slider-input">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="slider-example-3">
<input type="hidden" class="custom-slider-input">
<input type="hidden" class="custom-slider-input">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Datepickers -->
<div id="datepickers" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Datepickers</h3>
<p>Datepickers are also available and similar to slider controls they are
<strong>very easy to create</strong>, being based on a single input element. Datepickers are customisable as well, letting
you create complex configurations with range selections for example.</p>
</div>
<div class="example col-lg-8 col-md-10 ml-auto mr-auto">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="form-group">
<label for="datepicker-example-1">Date of Birth</label>
<div class="input-group with-addon-icon-left">
<input type="text" class="form-control" id="datepicker-example-1" placeholder="Date of Birth">
<span class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="form-group">
<label>Employment Period</label>
<div class="input-daterange input-group" id="datepicker-example-2">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</span>
<input type="text" class="input-sm form-control" name="start" placeholder="Start Date"/>
<span class="input-group-middle"><span class="input-group-text">-</span></span>
<input type="text" class="input-sm form-control" name="end" placeholder="End Date" />
<span class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Cards -->
<div id="cards" class="container mb-2" style="padding-bottom: 1px">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Cards</h3>
<p>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.</p>
</div>
<div class="example col-md-12 ml-auto mr-auto">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img class="card-img-top" src="images/demo/stock-photos/3.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Sample Card Title</h4>
<p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
in his length hid...</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
<div class="card">
<img class="card-img-top" src="images/demo/stock-photos/1.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Sample Card Title</h4>
<p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
in his length hid...</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 sm-hidden">
<div class="card">
<img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Sample Card Title</h4>
<p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
in his length hid...</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 d-none sm-hidden last">
<div class="card">
<img class="card-img-top" src="images/demo/stock-photos/2.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Sample Card Title</h4>
<p class="card-text">He seems sinking under the evidence could not only grieve and a visit. The father is to bless and placed
in his length hid...</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Buttons -->
<div id="buttons" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Buttons</h3>
<p>Two new button modifiers are introduced in Shards that allow you to create
<strong>pill-shaped</strong> and
<strong>squared</strong> buttons for both filled and outlined variations for an extended range of possible combinations.</p>
</div>
<div class="example example-buttons">
<div class="col-md-9 ml-auto mr-auto">
<h5 class="text-muted mb-4">Normal</h5>
</div>
<!-- Normal Buttons -->
<div class="row mb-4">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
</div>
<!-- Outlined Buttons -->
<div class="mb-5 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
</div>
<div class="col-md-9 ml-auto mr-auto">
<h5 class="text-muted mb-4">Squared</h5>
</div>
<!-- Squared Buttons -->
<div class="mb-4 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-primary btn-squared">Primary</button>
<button type="button" class="btn btn-secondary btn-squared">Secondary</button>
<button type="button" class="btn btn-success btn-squared">Success</button>
<button type="button" class="btn btn-danger btn-squared">Danger</button>
<button type="button" class="btn btn-warning btn-squared">Warning</button>
<button type="button" class="btn btn-info btn-squared">Info</button>
<button type="button" class="btn btn-light btn-squared">Light</button>
<button type="button" class="btn btn-dark btn-squared">Dark</button>
</div>
</div>
<!-- Squared and Outlined Buttons -->
<div class="mb-5 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-outline-primary btn-squared">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-squared">Secondary</button>
<button type="button" class="btn btn-outline-success btn-squared">Success</button>
<button type="button" class="btn btn-outline-danger btn-squared">Danger</button>
<button type="button" class="btn btn-outline-warning btn-squared">Warning</button>
<button type="button" class="btn btn-outline-info btn-squared">Info</button>
<button type="button" class="btn btn-outline-light btn-squared">Light</button>
<button type="button" class="btn btn-outline-dark btn-squared">Dark</button>
</div>
</div>
<div class="col-md-9 ml-auto mr-auto">
<h5 class="text-muted mb-4">Pill-shaped</h5>
</div>
<!-- Pill Shaped Buttons -->
<div class="mb-4 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-primary btn-pill">Primary</button>
<button type="button" class="btn btn-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-success btn-pill">Success</button>
<button type="button" class="btn btn-danger btn-pill">Danger</button>
<button type="button" class="btn btn-warning btn-pill">Warning</button>
<button type="button" class="btn btn-info btn-pill">Info</button>
<button type="button" class="btn btn-light btn-pill">Light</button>
<button type="button" class="btn btn-dark btn-pill">Dark</button>
</div>
</div>
<!-- Pill-shaped and Outlined Buttons -->
<div class="mb-5 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-outline-primary btn-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-outline-success btn-pill">Success</button>
<button type="button" class="btn btn-outline-danger btn-pill">Danger</button>
<button type="button" class="btn btn-outline-warning btn-pill">Warning</button>
<button type="button" class="btn btn-outline-info btn-pill">Info</button>
<button type="button" class="btn btn-outline-light btn-pill">Light</button>
<button type="button" class="btn btn-outline-dark btn-pill">Dark</button>
</div>
</div>
<div class="col-md-9 ml-auto mr-auto">
<h5 class="text-muted mb-4">Using Icons</h5>
</div>
<!-- Buttons with Icons : Material Icons -->
<div class="mb-4 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-pill btn-primary">
<i class="fa fa-download mr-1"></i> Download</button>
<button type="button" class="btn btn-pill btn-secondary">
<i class="fa fa-lock mr-1"></i>Authorize</button>
<button type="button" class="btn btn-pill btn-success">
<i class="fa fa-check mr-1"></i>Success</button>
<button type="button" class="btn btn-pill btn-danger">
<i class="fa fa-remove mr-1"></i>Delete</button>
<button type="button" class="btn btn-pill btn-info">
<i class="fa fa-envelope mr-1"></i> Message</button>
<button type="button" class="btn btn-pill btn-warning">
<i class="fa fa-star mr-1"></i>Favourite</button>
</div>
</div>
<!-- Buttons with Icons : FontAwesome -->
<div class="mb-5 row">
<div class="col-md-9 ml-auto mr-auto d-flex justify-content-around buttons-wrapper">
<button type="button" class="btn btn-pill btn-outline-primary">
<i class="fa fa-download mr-1"></i> Download</button>
<button type="button" class="btn btn-pill btn-outline-secondary">
<i class="fa fa-lock mr-1"></i>Authorize</button>
<button type="button" class="btn btn-pill btn-outline-success">
<i class="fa fa-check mr-1"></i>Success</button>
<button type="button" class="btn btn-pill btn-outline-danger">
<i class="fa fa-remove mr-1"></i>Delete</button>
<button type="button" class="btn btn-pill btn-outline-info">
<i class="fa fa-envelope mr-1"></i> Message</button>
<button type="button" class="btn btn-pill btn-outline-warning">
<i class="fa fa-star mr-1"></i>Favourite</button>
</div>
</div>
</div>
</div>
<!-- Progress Bars -->
<div id="progress-bars" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Progress Bars</h3>
<p>In addition to the default styles Shards allows you to adjust the width and add labels to your progress bars.</p>
</div>
<div class="example col-lg-9 col-md-12 ml-auto mr-auto px-0">
<div class="row">
<div class="col-md-6 pb-widths">
<h6 class="text-muted">Widths</h6>
<div class="progress progress-sm mb-4">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-4">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-md-6">
<h6 class="text-muted">Labels</h6>
<div class="progress mb-4">
<div class="progress-bar bg-success" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress mb-4">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modals -->
<div id="modals" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Modals</h3>
<p>Display confirmation messages, forms or any type of content to your users using beautiful and non-disruptive modals.</p>
</div>
<div class="mb-5">
<!-- Trigger -->
<button type="button" class="btn btn-primary btn-pill btn-lg d-table ml-auto mr-auto" data-toggle="modal" data-target="#exampleModal">
✋ Click Me!
</button>
<!-- Modal Body -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">🤔 Think about it</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Triggering this action might affect you later.
<strong>Do you still want to continue?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Nope</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Yep</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Badges -->
<div id="badges" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Badges</h3>
<p>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.</p>
</div>
<div class="example col-md-10 ml-auto mr-auto mb-5 pb-4">
<div class="row mb-3">
<div class="d-table ml-auto mr-auto">
<span class="badge mr-3 badge-primary">Primary</span>
<span class="badge mr-3 badge-outline-secondary">Secondary</span>
<span class="badge mr-3 badge-pill badge-success">Success</span>
<span class="badge mr-3 badge-pill badge-outline-danger">Danger</span>
<span class="badge mr-3 badge-squared badge-warning">Warning</span>
<span class="badge mr-3 badge-squared badge-outline-info">Info</span>
</div>
</div>
</div>
</div>
<!-- Popups / Popovers -->
<div id="popups-popovers" class="container">
<div class="section-title col-lg-8 col-md-10 ml-auto mr-auto">
<h3 class="mb-4">Tooltips & Popovers</h3>
<p>Don't let your uses guess by attaching tooltips and popoves to any element. Just make sure you enable them first
via JavaScript.</p>
</div>
<div class="row">
<div class="col-lg-10 col-md-10 ml-auto mr-auto mb-5 pb-4">
<div class="row ml-auto mr-auto">
<!-- Tooltips -->
<div class="col-lg-6 col-md-12 mb-3">
<h5 class="text-muted mb-4 d-block">Tooltips</h5>
<!-- Tooltip: Top -->
<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="top" title="I'm on top! 👆">Top</button>
<!-- Tooltip: Bottom -->
<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="bottom" title="I'm at the bottom! 👇">
Bottom
</button>
<!-- Tooltip: Left -->
<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="Left" title="I'm on the left! 👈">
Left
</button>
<!-- Tooltip: Right -->
<button type="button" class="btn btn-primary mr-1" data-toggle="tooltip" data-placement="right" title="I'm on the right! 👉">
Right
</button>
</div>
<!-- Popovers -->
<div class="col-lg-6 col-md-