COMPONENTS

expand_more

Basic Components

Colors

#1976d2Primary

#125ca6Primary Dark

#cfd8dcSecondary

#b4bcc0Secondary Dark

#4caf50Success

#388e3cSuccess Dark

#009688Info

#00796bInfo Dark

#ff5722Warning

#125ca6Warning Dark

#c62828Danger

#8e0000Danger Dark

#374046Dark

#131618Inverse

#d0d2d3Grey

#505254Dark Grey
 
Typography

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraphs

Large Paragraph (lead). Vivamus scelerisque dolor enim, a euismod ex egestas nec. Sed a fermentum justo.

Regular Paragraph. Vivamus scelerisque dolor enim, a euismod.

Blockquote

Quisque tincidunt dolor diam, malesuada pellentesque.

John Doe CEO @ A Company

Lists

  • Aliquam molestie quam intin bibendum
  • Morbi quis neque non nistas pharetra
  • Donec blandit dapibus ex eu euismod
  • Pellentesque habitant morbi tristique
  • Aenean auctor sit amet augue lacinia
  • Vestibulum porttitor tortor facilisis
  • Nullam vitae libero nec augue felis
  • Sed consectetur tellus tortor vitae
 
Buttons

Colors

Primary Secondary Success Info Warning Danger Dark

Outline Colors

Primary Secondary Success Info Warning Danger Dark
 

Gradient Colors

Primary Secondary Success Info Warning Danger Dark

Styles & Sizes

Default Sharp Pill Button

 

xSmall Small Medium Large
 

Buttons with Icons

thumb_up Thumbs Up warning Warning Coffee local_cafe Location near_me brush camera_alt security

Icon Button Sizes

location_on location_on location_on location_on
 

Social Button Styles

Subscribe Tweet - 67.4K Repost - 5.6K

 

Social Buttons

Share - 99.3K Tweet - 67.4K Connect with Linkedin Pin it - 3.7K Find Us on Dribbble Follow Us on Instagram Subscribe Watch Now Repost Dropbox Skype Follow Us Repost - 5.6K Connect with Github

 
Dropdown & Dropup
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Split Dropdown
Action Another action Something else here
Separated link
Split Dropup
Action Another action Something else here
Separated link
 
Popovers & Tooltips

Popovers

expand_less expand_more chevron_left chevron_right

Tooltips

expand_less expand_more chevron_left chevron_right

 
Modals

Default Modals

check_box_outline_blank Default line_style Long search Small fullscreen Large

Custom Modals

first_page Left last_page Right unfold_more Full Screen person Sign In
 
Checkbox

Checkbox Colors

Checkbox States

Radio

Radio Colors

Radio States

 
Switches

Default Switches

Pill Switches

 
Tables

Data Table

Users Products Registered Earnings Status
Mark @mdo
34 Jun 01, 2020 $5.350 Pending edit check_box delete
Jacob @fat
19 Mar 15, 2020 $6,964 Paid edit check_box delete
Larry @twitter
73 Jan 29, 2020 $2.127 Canceled edit check_box delete
 

Shopping-Cart Table

Product Price Quantity Total
Black Bag Men's
$69.99 $139.98 close
Sunglasses Accessories
$19.99 $59.97 close

Sub Total: $199.95

Shipping: $10

VAT: 7%

Total (Incl. VAT): $224.65

 sync Update shopping_cart Checkout
 
Progress Bars & Sliders

Progress Bars

Primary 25%

Dark 40%

Success 55%

Info 70%

Warning 85%

Danger 100%

Horizontal Slider

Range Slider

Min: Max:

Vertical Slider

 
Alerts & Badges

Alerts

Badges

Primary Secondary Success Info Warning Danger
 

Pill Badges

Primary Secondary Success Info Warning Danger
 

Icon Badges

email person star favorite notifications brush
 

Heading with badge

H4 heading with Badge

 
Accordions

Default Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Primary Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Nested Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Nested Dark Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Forms

Inputs

Form Controls

 
Contact Forms

Default Form

Fullwidth Form on Card

 

Multicolumn Form with icons

Form with icons on Card

 
Login & Register Forms

Login Form

Login Form with icons on Card

Register Form

Register Form with icons on Card

 
Comment Forms

Comment Form

  • John Doe
    Jun 01, 2020

    Proin ullamcorper sem id velit vestibulum tempus. Duis accumsan vel velit ut porttitor. Nam non molestie sapien. reply Reply

    Erika Doe
    Jun 02, 2020

    Quisque et sagittis neque. Mauris suscipit lacus at ex placerat, vel ultricies justo bibendum. reply Reply

 
Leave a Comment

Comment Reply

  • John Doe
    Mar 19, 2020

    Proin ullamcorper sem id velit vestibulum tempus. Duis accumsan vel velit ut porttitor. Nam non molestie sapien. Phasellus interdum mauris tellus, a scelerisque orci convallis id. reply Reply

    Leave a Reply

Cards

Default Cards

Card Block

Card Block. This is some text, button and icon within a card block.Button flag
 

Cards with icons

thumb_up
Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam. Cras pellentesque vehicula est eget fermentum. Curabitur vitae imperdiet tortor. Sed convallis dolor lacus.

Button
weekend
Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam. Cras pellentesque vehicula est eget fermentum. Curabitur vitae imperdiet tortor. Sed convallis dolor lacus.

Button
 
person
Card Title
add_circle Button
 

Cards with images

card-image-cap
Card Title
Top Image

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam. Cras pellentesque vehicula est eget fermentum curabitur.

card-image-cap
Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam cras pellentesque.

Card Title
Bottom Image

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam. Cras pellentesque vehicula est eget fermentum curabitur.

card-image-cap
 

Cards with raised images

Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam cras pellentesque.

Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam cras pellentesque.

Card Title

Suspendisse lectus ligula, eleifend eget odio in, ornare condimentum quam cras pellentesque.

 
User Profile Cards
Spencer Horton

Web Designer

View Profile

card-image-cap
Alisa Hester

UI Designer

Manager

Victor Hansen

Suspendisse in orci vitae sapien semper posuere mauris at imperdiet.

local_phone Call Now email Send Email

Designer

Britney Cooper

local_phone email

Mia Denys

Web Designer

Frontend Team

local_phone
email
Jacob Ginnish

Web Developer @ facebook.com

"Etiam in gravida ligula. Phasellus a blandit lectus. Sed in libero ac ex."

star star star star star

star star star_half star star

Etiam in gravida ligula. Phasellus a blandit lectus. Sed in libero ac ex pulvinar accumsan at at justo. Cras sit amet eram bendum orci.

- Oscar Khan | Google.com

 
Blog Cards

today May 28, 2020 / person Leo Gill

Mountains Travel

Suspendisse in orci vitae sapien semper posuere. Mauris a gravida lacus...

read_more Read More
Twitter Post

Fusce imperdiet sollicitudin scelerisque. Etiam tristique eu nisl ut dapibus. Donec et vehicula cursus pretium mauris a gravida.

schedule4 Days ago

format_quote

ByAlisa Hester

"Fusce imperdiet sollicitudin scelerisque. Etiam tristique eu nisl ut dapibus vehicul."

today May 28, 2020 / bookmark Weekly Quotes

User Reviews

Fusce imperdiet sollicitudin scelerisque. Etiam tristique eu nisl ut dapibus. Donec pretium.

today May 28, 2020 / person Victor Hansen

bookmarkPhotography

Modern City

Etiam nec semper tortor. Sed malesuada fermentum tortor id euismod. Proin at urna sit amet enim semper pretium eu non risus. Praesent dictum nisl ut finibus tincidunt. Nulla molestie augue nec gravida aliquet.

today May 28, 2020 / person Britney Cooper comment2

play_arrow
Video Post

Fusce imperdiet sollicitudin scelerisque. Etiam tristique eu nisl ut dapibus. Donec pretium.

today May 28, 2020

 
Portfolio Cards
visibility
Yellow Building

Suspendisse in orci vitae sapien semper posuere. Mauris a gravida lacus...

link
Bright Lamp
Flower

Suspendisse in orci vitae sapien semper posuere. Mauris a gravida lacus...

todayMay 28, 2020 | bookmarkWeb Design

 
Product Cards

Black Jacket $99.99

Men's

star star star star star

shopping_cart Buy Now

SALE

Blue Jeans Women Jeans

$69.99 $49.99

shopping_cart Add to Cart

favorite 18

Cool Shirt $24.99

Shirts

Donec commodo commodo ipsum. Cras ut placerat arcu quis laoreet mi lacinia.

shopping_cart Add to Cart

favorite_border 37

 
Pricing Cards

Starter

$10 / Mo.

  • checkUI Kit
  • checkComponents
  • checkSections
  • closeTemplates
  • closeSass
Get Started
business

Business

$25 / Mo.

  • checkUI Kit
  • checkComponents
  • checkSections
  • closeTemplates
thumb_up Get Started
$50

Donec facilisis lobortis augue, vitae tincidunt massa. Sed ut aliquam.

  • checkUI Kit
  • checkComponents
  • checkSections
shopping_cart Buy Now

Extras

Promo Boxes

Promo Box with icons

home
Left Aligned

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam, at tincidunt nisl condimentum in.

person
Center Aligned

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam, at tincidunt nisl condimentum in.

email
Right Aligned

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam, at tincidunt nisl condimentum in.

 

Promo Box with icon positions

favorite
Left Icon

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit.

map
Center Icon

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur.

today
Right Icon

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit.

 

Promo Box with big icon positions

emoji_events
Left Icon

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

person
Center Icon

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

notifications
Right Icon

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

 

Promo Box with image positions

LEFT IMAGE

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

CENTER IMAGE

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

RIGHT IMAGE

Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.

 

Promo Box with image left

 
IMAGE LEFT

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

 
IMAGE LEFT

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

 

Promo Box with image right

IMAGE RIGHT

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

 
IMAGE RIGHT

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

 
 

Promo Box with image background

TOP BOX

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

CENTER BOX

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

BOTTOM BOX

Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam nisl.

 
Counters

Default Counters on Cards

person

123

Visitors

schedule

456

Hours

visibility

789

Views

chat

997

Comments

 

Inline Counters on Promo Box

work

23

Projects

person

56

Customers

emoji_events

89

Awards

 

Inline Counters with icons

layers

27

Templates

cloud_download

1257

Downloads

people

1155

Customers

local_cafe

2137

Coffee

 
Timelines

Default Timeline

  • University

    Web Development

    place Miami schedule 2016-2020

    Quisque sit amet urna et neque porttitor mattis.

  • High School

    Web Design

    place New York schedule 2012-2016

    Quisque sit amet urna et neque porttitor mattis.

Timeline with icons

  • school
    University

    Web Development

    place Miami schedule 2016-2020

    Quisque sit amet urna et neque porttitor mattis.

  • check_circle
    High School

    Web Design

    place New York schedule 2012-2016

    Quisque sit amet urna et neque porttitor mattis.

 
Pricing Tables

Default Pricing Tables

Starter

$ 9.99

  • checkUI Kit
  • checkComponents
  • closeSections
  • closeTemplates
Buy Now
Business

$ 19.99

  • checkUI Kit
  • checkComponents
  • checkSections
  • closeTemplates
Buy Now
Premium

$ 29.99

  • checkUI Kit
  • checkComponents
  • checkSections
  • checkTemplates
Buy Now
 

Stacked Pricing Tables

Starter

$ 9.99

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
Business

$ 19.99

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
Premium

$ 29.99

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
 

Pricing Tables Style 2

Starter

$ 19

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
Business

$ 49

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
Premium

$ 89

  • UI Kit
  • Components
  • Sections
  • Templates
  • 24/7 Support
Buy Now
 

Stacked Pricing Tables Style 2

Starter

$ 19

  • checkUI Kit
  • checkComponents
  • closeSections
  • closeTemplates
Buy Now
Business

$ 49

  • checkUI Kit
  • checkComponents
  • checkSections
  • closeTemplates
Buy Now
Premium

$ 89

  • checkUI Kit
  • checkComponents
  • checkSections
  • checkTemplates
Buy Now
 
Media

Images

Image Caption

Embedded Video

 

Self Hosted Video

 
Carousel

Default Carousel

 

Fullwidth Carousel

Fullwidth Carousel with controls

 
Widgets
About Us

Integer pulvinar vel libero ut dignissim. Nullam tincidunt quam ipsum, condimentum rutrum leo lipsum imperdiet urma eget.

Quisque imperdiet odio elementum, convallis urna non, elementum.

Useful Links
Tags
#design #web #illustrations #branding #webdesign #travel
Newsletter

Quisque aliquet lorem nec dui posuere, scelerisque ultrices metus aliquam. Nam mattis faucibus ligula, sed dictum leo pulvinar ut.

Recent Posts
Social Feed

#lorem ipsum vel libero ut digisim. Nullam lipsum.com quam.

Quisque #quisque ultrices metus aliquam faucibus ligula.

Integer pulvinar vel libero ut dignissim. Nullam tincidunt quam ipsum, condimentum rutrum leo lipsum imperdiet urma eget.

Quisque imperdiet odio elementum, convallis urna non, elementum.

Recent Projects
Contact Us
Links List
Search
Instagram Feed