Plus UI Design Styleguide

This styleguide was made customizing Bootstrap's sass variables

Typography

h1. Plus UI Design heading

<h1>Plus UI Design</h1>

h2. Plus UI Design heading

<h2>Plus UI Design</h2>

h3. Plus UI Design heading

<h3>Plus UI Design</h3>

h4. Plus UI Design heading

<h4>Plus UI Design</h4>
h5. Plus UI Design heading
<h5>Plus UI Design</h5>
h6. Plus UI Design heading
<h6>Plus UI Design</h6>

H3 Plus UI Design With secondary text

<h3>Plus UI Design</h3><small class="text-muted">With secondary text</small>

Display 1

<h1 class="display-1">Plus UI Design</h1>

Display 2

<h1 class="display-2">Plus UI Design</h1>

Display 3

<h1 class="display-3">Plus UI Design</h1>

Display 4

<h1 class="display-4">Plus UI Design</h1>

Body text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor ...</p>

You can use the mark tag to highlight text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>

This line of text is meant to be treated as deleted text.

<p><del>You can use the mark tag to <mark>highlight</mark> text.</del></p>

This line of text is meant to be treated as no longer accurate.

<p><s>This line of text is meant to be treated as no longer accurate.</s></p>

This line of text will render as underlined

<p><u>This line of text will render as underlined</u></p>

This line of text is meant to be treated as fine print.

<p><small>This line of text is meant to be treated as fine print.</small></p>

This line rendered as bold text.

<p><strong>This line rendered as bold text.</strong></p>

This line rendered as italicized text.

<p><em>This line rendered as italicized text.</em></p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>  <footer class="blockquote-footer">    Someone famous in <cite title="Source Title">Source Title</cite>  </footer></blockquote>

Forms

Buttons

Button Variants

<a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit"><input class="btn btn-primary" type="reset" value="Reset">

Button Sizes


Soft Buttons


Ghost Buttons


Button Icon


Square

Breadcrumb

Cards

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Primary Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
orange Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Shadows

Inner shadow
No shadow
Small shadow
Regular shadow
Larger shadow

Colors

Blue
Orange
Yellow
Cyan
Red

Grays

Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900

Tabs

Tab 0
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5