Text Sizes

---

---

Header examples

---

2 XL

XL

Large

Medium

Small

h1

h2

h3

h4

h5

Regular Text

---

Small text

Text

Lead text

Italic text

Emphasis text

Bold Text

Bolder Text

Large text

Large text bold

Large text bold muted

Large text bold primary

Large text bold secondary

Large text bold success

Large text bold danger

Large text bold warning

 

---

---

 

Button Attributes

Large Buttons

Large Linkable Button Default Large Linkable Button Primary Large Linkable Button Secondary Large Linkable Button Danger Large Text Button

Regular Buttons

Linkable Button Linkable Button Primary Linkable Button Secondary Linkable Button Danger Text Button

Small Buttons

Small Linkable Button Small Linkable Button Primary Small Linkable Button Secondary Small Linkable Button Danger Small Text Button

Generally this is used to link to another informational page:

Linkable Button Primary

This is our Buy Now button:

Buy Now

 

---

Cards

Card for grid

Card Box Primary

Card Box Secondary

Card for grid Linked

Card Box Primary Linked

Card Box Secondary Linked

Card for grid Success

Card Box Primary Success

Card Box Secondary Success

Card for grid warning

Card Box Primary warning

Card Box Secondary warning

Card for grid danger

Card Box Primary danger

Card Box Secondary danger

 

---

Tiles

Default Tile

Muted Tile

Primary Tile

Secondary Tile

---

 

Tiles with cards

Default Tile

Text on default card

Text on primary card

Text on secondary card

Muted Tile

Text on default card

Text on primary card

Text on secondary card

Primary Tile

Text on default card

Text on primary card

Text on secondary card

Secondary Tile

Text on default card

Text on primary card

Text on secondary card

Responsive Tiles

When you are on a smaller screen

These tiles and text will adjust

and resize.

---

 

Shadow

Shadow on box

---

 

Section Default

Some Text

Some Text

Some Text

Section Muted

Some Text

Some Text

Some Text

Section Primary

Some Text

Some Text

Some Text

Section Secondary

Some Text

Some Text

Some Text

Section with Images

Some Text

Some Text

Some Text

---

 

Grid Of Cards With Fixed Widths

Column One

Row One

Row Two

Column Two

Row One

Row Two

Column Three

Row One

Row Two

Column Four

Row One

Row Two

Column Five

Row One

Row Two

 

---

---

 

Grid Match Example

Grid One

This grid has

more text but

they will stay

the same height!

Grid Two

This grid has less text

 

---

---

 

Grid Of Cards with Badges Wrap Down The Page Example

Top Badge Positions

Badge One

Top Left

Badge Two

Top Center

Badge Three

Top Right

Center Positions

Badge Four

Center Left

Badge Five

Center

Badge Six

Center Right

Bottom Badge Positions

Bottom Left

Badge Seven

Bottom Center

Badge Eight

Bottom Right

Badge Nine

Grid Of Cards with Label Positions and Colors Wrap Down The Page Example

Label One

Top Left

Color: Success

Label Two

Top Center

Color: Warning

Label Three

Top Right

Color: Danger

Label Four

Center Left

Color: Danger

Label Five

Center

Color: Warning

Label Six

Center Right

Color: Success

Label Seven

Bottom Left

Color: Warning

Label Eight

Bottom Center

Color: Success

Label Nine

Bottom Right

Color: Danger

Paralax Example

Countdown Example

This Offer Expires In:

Switcher Example

• Breastfeeding
• Skin to Skin
• Baby
• Mom
• Family

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sedtiunneque. Nestibulum placerat, ipsum id maximus sagittis, purus mauris lacinia nisl, sit amet tempus nisi sapien eu diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Ut a sapien mattis, ultrices sem eget, venenatis nibh. Pellentesque faucibus fringilla odio euismod fermentum. Aliquam interdum pharetra ligula sed mollis. Etiam blandit velit id tempor pulvinar. In a justo mauris. Etiam lacinia nibh sapien, id blandit lorem vehicula non.
  
  
  
  
• Baby
  Mauris scelerisque diam in augue dignissim, sit amet tincidunt diam congue. Pellentesque quis feugiat orci. Ut ut odio vestibulum, viverra nunc ut, venenatis turpis. Phasellus aliquet dui eu ante commodo, sit amet convallis turpis consequat. Vestibulum dui elit, gravida at laoreet dignissim, luctus sed risus.
  • Baby Weight
  • Baby Length
  • Baby Head Circumference
• Morbi egestas fringilla mi, tincidunt cursus nibh facilisis vel. Fusce ut aliquet purus, eget condimentum orci. Phasellus euismod euismod neque, in porttitor metus elementum ut. Nam eu felis vel enim tempus fringilla. Phasellus vel lorem eros. Curabitur dictum, est eget vestibulum iaculis, neque lectus tempus quam.
• Family Support
  In laoreet eros nec tellus tincidunt, eu scelerisque ligula molestie. Duis egestas risus a velit viverra viverra. Donec hendrerit scelerisque mauris quis convallis. Donec finibus imperdiet rutrum. Sed et nunc a neque lacinia iaculis. Vivamus pellentesque semper auctor. Curabitur tincidunt metus ac ante malesuada, eu mattis est viverra. Curabitur vel pellentesque orci. Etiam id metus velit.
  Nulla tristique leo non leo posuere facilisis. Nam consequat leo a varius lacinia. Vivamus cursus laoreet augue, in dapibus ante molestie at.

Slideshow Example

Form Example

Animation Examples

Inverse Color Example For Boxes

Modal Capability Examples

Click the buttons to see the results.

Image Video YouTube Vimeo

Icons We Can Use and Accordion Example

• CLick Here For Available App Icons

  App Icons

  ---

  • Check

  ---

  • Home

  ---

  • Users

  ---

  • User 

  ---

  • Sign-In  

  ---

  • Settings 

  ---

  • Cog 

  ---

  • Lock

  ---

  • Unlock  

  ---

  • Comment

  ---

  • Comments

  ---

  • Commenting

  ---

  • Hashtag

  ---

  • Tag

  ---

  • Cart

  ---

  • Card

  ---

  • Mail

  ---

  • Receiver

  ---

  • Print

  ---

  • Search

  ---

  • Location

  ---

  • Bookmark

  ---

  • Paint Bucket

  ---

  • Camera

  ---

  • Camera

  ---

  • Bell

  ---

  • Microphone

  ---

  • Bolt

  ---

  • Star

  ---

  • Heart

  ---

  • Happy

  ---

  • Lifesaver

  ---

  • RSS

  ---

  • Social

  ---

  • World

  ---

  • Calendar

  ---

  • Clock

  ---

  • History

  ---

  • Future

  ---

  • Pencil

  ---

  • Trash

  ---

  • Move

  ---

  • Link

  ---

  • Question

  ---

  • Info

  ---

  • Warning

  ---

  • Image

  ---

  • Thumbnails

  ---

  • Table

  ---

  • List

  ---

  • Menu

  ---

  • Grid

  ---

  • More

  ---

  • More Vertical

  ---

  • Plus

  ---

  • Plus Circle

  ---

  • Minus

  ---

  • Minus Circle

  ---

  • Close

  ---

  • Ban

  ---

  • Refresh

  ---

  • Play

  ---

  • Play Circle

  ---

• Click Here For Available Device Icons

  Device Icons

  • TV

  ---

  • Desktop

  ---

  • Laptop

  ---

  • Tablet

  ---

  • Phone

  ---

  • Tablet Landscape

  ---

  • Phone Landscape

  ---

• Click Here For Available Direction Icons

  Direction Icons

  • Reply

  ---

  • Forward

  ---

  • Expand

  ---

  • Shrink

  ---

  • Arrow Up

  ---

  • Down Arrow

  ---

  • Left Arrow

  ---

  • Right Arrow

  ---

  • Chevron Up

  ---

  • Chevron Down

  ---

  • Chevron Double Left

  ---

  • Chevron Double Right

  ---

  • Triangle Up

  ---

  • Triangle Down

  ---

  • Triangle Left

  ---

  • Triangle Right

  ---

• Click Here For Available Brand Icons

  Brand Icons

  • 500px

  ---

  • Behance

  ---

  • Dribbble

  ---

  • Etsy

  ---

  • Facebook

  ---

  • Flickr

  ---

  • Foursquare

  ---

  • Github

  ---

  • Github Alt

  ---

  • Gitter

  ---

  • Google

  ---

  • Google Plus

  ---

  • Instagram

  ---

  • Joomla

  ---

  • Linkedin

  ---

  • Pagekit

  ---

  • Pinterest

  ---

  • Reddit

  ---

  • Soundcloud

  ---

  • Trip Advisor

  ---

  • Tumblr

  ---

  • Twitter

  ---

  • UiKit

  ---

  • Vimeo

  ---

  • Whatsapp

  ---

  • Wordpress

  ---

  • Xing

  ---

  • Yelp

  ---

  • Youtube

  ---