Buttons

Input

Select

Tags input

Navbar

Progress bars & Sliders



Navigation

Checkboxes

Radio Buttons

Switches

Share

Typography

Header 1Showers across the W

Header 2Give this quartet a few

Header 3The Vatican transitions to a

Header 4Great American Bites: Telluride's Oak, The

Header 5Author Diane Alberts loves her some good
Header 6With the success of young-adult book-to-movie
Paragraph

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Image example-image

Note: gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lead Text

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Quote

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus.

Steve Jobs, CEO Apple
Small Font

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Samples

  • Meet Adrian at 6pm

    Times Square
  • Chat with V.Kudinov

    Skype conference an 9 am
  • Watch Iron Man

    1998 Broadway
  • Fix bug on a Website

    As soon as possible

Color Swatches

#1abc9c
Turquoise
#16a085
Green sea
#2ecc71
Emerald
#27ae60
Nephritis
#3498db
Peter river
#2980b9
Belize hole
#9b59b6
Amethyst
#8e44ad
Wisteria
#34495e
Wet asphalt
#2c3e50
Midnight blue
#f1c40f
Sun flower
#f39c12
Orange
#e67e22
Carrot
#d35400
Pumpkin
#e74c3c
Alizarin
#c0392b
Pomegranate
#ecf0f1
Clouds
#bdc3c7
Silver
#95a5a6
Concrete
#7f8c8d
Asbestos
SWATCHES

Colors — is almost the most important part of the Flat UI. Better to use different shades of provided colors than new.

Icons (14)

Toilet-Paper
Gift-Box
Pensils
Clipboard
Retina
Compas
Map
Chat
Mail
Book
Calendar
Pocket
Watches
Infinity-Loop

Glyphs (70)

Social (27)

Font Awesome Icons (786)

4.4 fa-500px []
4.7 fa-address-book []
4.7 fa-address-book-o []
4.7 fa-address-card []
4.7 fa-address-card-o []
fa-adjust []
fa-adn []
fa-align-center []
fa-align-justify []
fa-align-left []
fa-align-right []
4.4 fa-amazon []
fa-ambulance []
4.6 fa-american-sign-language-interpreting []
fa-anchor []
fa-android []
4.2 fa-angellist []
fa-angle-double-down []
fa-angle-double-left []
fa-angle-double-right []
fa-angle-double-up []
fa-angle-down []
fa-angle-left []
fa-angle-right []
fa-angle-up []
fa-apple []
fa-archive []
4.2 fa-area-chart []
fa-arrow-circle-down []
fa-arrow-circle-left []
fa-arrow-circle-o-down []
4.0 fa-arrow-circle-o-left []
4.0 fa-arrow-circle-o-right []
fa-arrow-circle-o-up []
fa-arrow-circle-right []
fa-arrow-circle-up []
fa-arrow-down []
fa-arrow-left []
fa-arrow-right []
fa-arrow-up []
fa-arrows []
fa-arrows-alt []
fa-arrows-h []
fa-arrows-v []
4.6 fa-asl-interpreting (alias) []
4.6 fa-assistive-listening-systems []
fa-asterisk []
4.2 fa-at []
4.6 fa-audio-description []
4.1 fa-automobile (alias) []
fa-backward []
4.4 fa-balance-scale []
fa-ban []
4.7 fa-bandcamp []
4.1 fa-bank (alias) []
fa-bar-chart []
fa-bar-chart-o (alias) []
fa-barcode []
fa-bars []
4.7 fa-bath []
4.7 fa-bathtub (alias) []
4.4 fa-battery (alias) []
4.4 fa-battery-0 (alias) []
4.4 fa-battery-1 (alias) []
4.4 fa-battery-2 (alias) []
4.4 fa-battery-3 (alias) []
4.4 fa-battery-4 (alias) []
4.4 fa-battery-empty []
4.4 fa-battery-full []
4.4 fa-battery-half []
4.4 fa-battery-quarter []
4.4 fa-battery-three-quarters []
4.3 fa-bed []
fa-beer []
4.1 fa-behance []
4.1 fa-behance-square []
fa-bell []
fa-bell-o []
4.2 fa-bell-slash []
4.2 fa-bell-slash-o []
4.2 fa-bicycle []
4.2 fa-binoculars []
4.2 fa-birthday-cake []
fa-bitbucket []
fa-bitbucket-square []
fa-bitcoin (alias) []
4.4 fa-black-tie []
4.6 fa-blind []
4.5 fa-bluetooth []
4.5 fa-bluetooth-b []
fa-bold []
fa-bolt []
4.1 fa-bomb []
fa-book []
fa-bookmark []
fa-bookmark-o []
4.6 fa-braille []
fa-briefcase []
fa-btc []
fa-bug []
4.1 fa-building []
fa-building-o []
fa-bullhorn []
fa-bullseye []
4.2 fa-bus []
4.3 fa-buysellads []
4.1 fa-cab (alias) []
4.2 fa-calculator []
fa-calendar []
4.4 fa-calendar-check-o []
4.4 fa-calendar-minus-o []
fa-calendar-o []
4.4 fa-calendar-plus-o []
4.4 fa-calendar-times-o []
fa-camera []
fa-camera-retro []
4.1 fa-car []
fa-caret-down []
fa-caret-left []
fa-caret-right []
fa-caret-square-o-down []
4.0 fa-caret-square-o-left []
fa-caret-square-o-right []
fa-caret-square-o-up []
fa-caret-up []
4.3 fa-cart-arrow-down []
4.3 fa-cart-plus []
4.2 fa-cc []
4.2 fa-cc-amex []
4.4 fa-cc-diners-club []
4.2 fa-cc-discover []
4.4 fa-cc-jcb []
4.2 fa-cc-mastercard []
4.2 fa-cc-paypal []
4.2 fa-cc-stripe []
4.2 fa-cc-visa []
fa-certificate []
fa-chain (alias) []
fa-chain-broken []
fa-check []
fa-check-circle []
fa-check-circle-o []
fa-check-square []
fa-check-square-o []
fa-chevron-circle-down []
fa-chevron-circle-left []
fa-chevron-circle-right []
fa-chevron-circle-up []
fa-chevron-down []
fa-chevron-left []
fa-chevron-right []
fa-chevron-up []
4.1 fa-child []
4.4 fa-chrome []
fa-circle []
fa-circle-o []
4.1 fa-circle-o-notch []
4.1 fa-circle-thin []
fa-clipboard []
fa-clock-o []
4.4 fa-clone []
fa-close (alias) []
fa-cloud []
fa-cloud-download []
fa-cloud-upload []
fa-cny (alias) []
fa-code []
fa-code-fork []
4.1 fa-codepen []
4.5 fa-codiepie []
fa-coffee []
fa-cog []
fa-cogs []
fa-columns []
fa-comment []
fa-comment-o []
4.4 fa-commenting []
4.4 fa-commenting-o []
fa-comments []
fa-comments-o []
fa-compass []
fa-compress []
4.3 fa-connectdevelop []
4.4 fa-contao []
fa-copy (alias) []
4.2 fa-copyright []
4.4 fa-creative-commons []
fa-credit-card []
4.5 fa-credit-card-alt []
fa-crop []
fa-crosshairs []
fa-css3 []
4.1 fa-cube []
4.1 fa-cubes []
fa-cut (alias) []
fa-cutlery []
fa-dashboard (alias) []
4.3 fa-dashcube []
4.1 fa-database []
4.6 fa-deaf []
4.6 fa-deafness (alias) []
fa-dedent (alias) []
4.1 fa-delicious []
fa-desktop []
4.1 fa-deviantart []
4.3 fa-diamond []
4.1 fa-digg []
fa-dollar (alias) []
4.0 fa-dot-circle-o []
fa-download []
fa-dribbble []
4.7 fa-drivers-license (alias) []
4.7 fa-drivers-license-o (alias) []
fa-dropbox []
4.1 fa-drupal []
4.5 fa-edge []
fa-edit (alias) []
4.7 fa-eercast []
fa-eject []
fa-ellipsis-h []
fa-ellipsis-v []
4.1 fa-empire []
fa-envelope []
fa-envelope-o []
4.7 fa-envelope-open []
4.7 fa-envelope-open-o []
4.1 fa-envelope-square []
4.6 fa-envira []
fa-eraser []
4.7 fa-etsy []
fa-eur []
fa-euro (alias) []
fa-exchange []
fa-exclamation []
fa-exclamation-circle []
fa-exclamation-triangle []
fa-expand []
4.4 fa-expeditedssl []
fa-external-link []
fa-external-link-square []
fa-eye []
fa-eye-slash []
4.2 fa-eyedropper []
4.6 fa-fa (alias) []
fa-facebook []
fa-facebook-f (alias) []
4.3 fa-facebook-official []
fa-facebook-square []
fa-fast-backward []
fa-fast-forward []
4.1 fa-fax []
fa-feed (alias) []
fa-female []
fa-fighter-jet []
fa-file []
4.1 fa-file-archive-o []
4.1 fa-file-audio-o []
4.1 fa-file-code-o []
4.1 fa-file-excel-o []
4.1 fa-file-image-o []
4.1 fa-file-movie-o (alias) []
fa-file-o []
4.1 fa-file-pdf-o []
4.1 fa-file-photo-o (alias) []
4.1 fa-file-picture-o (alias) []
4.1 fa-file-powerpoint-o []
4.1 fa-file-sound-o (alias) []
fa-file-text []
fa-file-text-o []
4.1 fa-file-video-o []
4.1 fa-file-word-o []
4.1 fa-file-zip-o (alias) []
fa-files-o []
fa-film []
fa-filter []
fa-fire []
fa-fire-extinguisher []
4.4 fa-firefox []
4.6 fa-first-order []
fa-flag []
fa-flag-checkered []
fa-flag-o []
fa-flash (alias) []
fa-flask []
fa-flickr []
fa-floppy-o []
fa-folder []
fa-folder-o []
fa-folder-open []
fa-folder-open-o []
fa-font []
4.6 fa-font-awesome []
4.4 fa-fonticons []
4.5 fa-fort-awesome []
4.3 fa-forumbee []
fa-forward []
fa-foursquare []
4.7 fa-free-code-camp []
fa-frown-o []
4.2 fa-futbol-o []
fa-gamepad []
fa-gavel []
fa-gbp []
4.1 fa-ge (alias) []
fa-gear (alias) []
fa-gears (alias) []
4.4 fa-genderless []
4.4 fa-get-pocket []
4.4 fa-gg []
4.4 fa-gg-circle []
fa-gift []
4.1 fa-git []
4.1 fa-git-square []
fa-github []
fa-github-alt []
fa-github-square []
4.6 fa-gitlab []
fa-gittip (alias) []
fa-glass []
4.6 fa-glide []
4.6 fa-glide-g []
fa-globe []
4.1 fa-google []
fa-google-plus []
4.6 fa-google-plus-circle (alias) []
4.6 fa-google-plus-official []
fa-google-plus-square []
4.2 fa-google-wallet []
4.1 fa-graduation-cap []
fa-gratipay []
4.7 fa-grav []
fa-group (alias) []
fa-h-square []
4.1 fa-hacker-news []
4.4 fa-hand-grab-o (alias) []
4.4 fa-hand-lizard-o []
fa-hand-o-down []
fa-hand-o-left []
fa-hand-o-right []
fa-hand-o-up []
4.4 fa-hand-paper-o []
4.4 fa-hand-peace-o []
4.4 fa-hand-pointer-o []
4.4 fa-hand-rock-o []
4.4 fa-hand-scissors-o []
4.4 fa-hand-spock-o []
4.4 fa-hand-stop-o (alias) []
4.7 fa-handshake-o []
4.6 fa-hard-of-hearing (alias) []
4.5 fa-hashtag []
fa-hdd-o []
4.1 fa-header []
fa-headphones []
fa-heart []
fa-heart-o []
4.3 fa-heartbeat []
4.1 fa-history []
fa-home []
fa-hospital-o []
4.3 fa-hotel (alias) []
4.4 fa-hourglass []
4.4 fa-hourglass-1 (alias) []
4.4 fa-hourglass-2 (alias) []
4.4 fa-hourglass-3 (alias) []
4.4 fa-hourglass-end []
4.4 fa-hourglass-half []
4.4 fa-hourglass-o []
4.4 fa-hourglass-start []
4.4 fa-houzz []
fa-html5 []
4.4 fa-i-cursor []
4.7 fa-id-badge []
4.7 fa-id-card []
4.7 fa-id-card-o []
4.2 fa-ils []
fa-image (alias) []
4.7 fa-imdb []
fa-inbox []
fa-indent []
4.4 fa-industry []
fa-info []
fa-info-circle []
fa-inr []
4.6 fa-instagram []
4.1 fa-institution (alias) []
4.4 fa-internet-explorer []
4.3 fa-intersex (alias) []
4.2 fa-ioxhost []
fa-italic []
4.1 fa-joomla []
fa-jpy []
4.1 fa-jsfiddle []
fa-key []
fa-keyboard-o []
fa-krw []
4.1 fa-language []
fa-laptop []
4.2 fa-lastfm []
4.2 fa-lastfm-square []
fa-leaf []
4.3 fa-leanpub []
fa-legal (alias) []
fa-lemon-o []
fa-level-down []
fa-level-up []
4.1 fa-life-bouy (alias) []
4.1 fa-life-buoy (alias) []
4.1 fa-life-ring []
4.1 fa-life-saver (alias) []
fa-lightbulb-o []
4.2 fa-line-chart []
fa-link []
fa-linkedin []
fa-linkedin-square []
4.7 fa-linode []
fa-linux []
fa-list []
fa-list-alt []
fa-list-ol []
fa-list-ul []
fa-location-arrow []
fa-lock []
fa-long-arrow-down []
fa-long-arrow-left []
fa-long-arrow-right []
fa-long-arrow-up []
4.6 fa-low-vision []
fa-magic []
fa-magnet []
fa-mail-forward (alias) []
fa-mail-reply (alias) []
fa-mail-reply-all (alias) []
fa-male []
4.4 fa-map []
fa-map-marker []
4.4 fa-map-o []
4.4 fa-map-pin []
4.4 fa-map-signs []
4.3 fa-mars []
4.3 fa-mars-double []
4.3 fa-mars-stroke []
4.3 fa-mars-stroke-h []
4.3 fa-mars-stroke-v []
fa-maxcdn []
4.2 fa-meanpath []
4.3 fa-medium []
fa-medkit []
4.7 fa-meetup []
fa-meh-o []
4.3 fa-mercury []
4.7 fa-microchip []
fa-microphone []
fa-microphone-slash []
fa-minus []
fa-minus-circle []
fa-minus-square []
fa-minus-square-o []
4.5 fa-mixcloud []
fa-mobile []
fa-mobile-phone (alias) []
4.5 fa-modx []
fa-money []
fa-moon-o []
4.1 fa-mortar-board (alias) []
4.3 fa-motorcycle []
4.4 fa-mouse-pointer []
fa-music []
fa-navicon (alias) []
4.3 fa-neuter []
4.2 fa-newspaper-o []
4.4 fa-object-group []
4.4 fa-object-ungroup []
4.4 fa-odnoklassniki []
4.4 fa-odnoklassniki-square []
4.4 fa-opencart []
4.1 fa-openid []
4.4 fa-opera []
4.4 fa-optin-monster []
fa-outdent []
4.0 fa-pagelines []
4.2 fa-paint-brush []
4.1 fa-paper-plane []
4.1 fa-paper-plane-o []
fa-paperclip []
4.1 fa-paragraph []
fa-paste (alias) []
fa-pause []
4.5 fa-pause-circle []
4.5 fa-pause-circle-o []
4.1 fa-paw []
4.2 fa-paypal []
fa-pencil []
fa-pencil-square []
fa-pencil-square-o []
4.5 fa-percent []
fa-phone []
fa-phone-square []
fa-photo (alias) []
fa-picture-o []
4.2 fa-pie-chart []
4.6 fa-pied-piper []
4.1 fa-pied-piper-alt []
4.1 fa-pied-piper-pp []
fa-pinterest []
4.3 fa-pinterest-p []
fa-pinterest-square []
fa-plane []
fa-play []
fa-play-circle []
fa-play-circle-o []
4.2 fa-plug []
fa-plus []
fa-plus-circle []
fa-plus-square []
4.0 fa-plus-square-o []
4.7 fa-podcast []
fa-power-off []
fa-print []
4.5 fa-product-hunt []
fa-puzzle-piece []
4.1 fa-qq []
fa-qrcode []
fa-question []
fa-question-circle []
4.6 fa-question-circle-o []
4.7 fa-quora []
fa-quote-left []
fa-quote-right []
4.1 fa-ra (alias) []
fa-random []
4.7 fa-ravelry []
4.1 fa-rebel []
4.1 fa-recycle []
4.1 fa-reddit []
4.5 fa-reddit-alien []
4.1 fa-reddit-square []
fa-refresh []
4.4 fa-registered []
fa-remove (alias) []
fa-renren []
fa-reorder (alias) []
fa-repeat []
fa-reply []
fa-reply-all []
4.1 fa-resistance (alias) []
fa-retweet []
fa-rmb (alias) []
fa-road []
fa-rocket []
fa-rotate-left (alias) []
fa-rotate-right (alias) []
4.0 fa-rouble (alias) []
fa-rss []
fa-rss-square []
4.0 fa-rub []
4.0 fa-ruble (alias) []
fa-rupee (alias) []
4.7 fa-s15 (alias) []
4.4 fa-safari []
fa-save (alias) []
fa-scissors []
4.5 fa-scribd []
fa-search []
fa-search-minus []
fa-search-plus []
4.3 fa-sellsy []
4.1 fa-send (alias) []
4.1 fa-send-o (alias) []
4.3 fa-server []
fa-share []
4.1 fa-share-alt []
4.1 fa-share-alt-square []
fa-share-square []
fa-share-square-o []
4.2 fa-shekel (alias) []
4.2 fa-sheqel (alias) []
fa-shield []
4.3 fa-ship []
4.3 fa-shirtsinbulk []
4.5 fa-shopping-bag []
4.5 fa-shopping-basket []
fa-shopping-cart []
4.7 fa-shower []
fa-sign-in []
4.6 fa-sign-language []
fa-sign-out []
fa-signal []
4.6 fa-signing (alias) []
4.3 fa-simplybuilt []
fa-sitemap []
4.3 fa-skyatlas []
fa-skype []
4.1 fa-slack []
4.1 fa-sliders []
4.2 fa-slideshare []
fa-smile-o []
4.6 fa-snapchat []
4.6 fa-snapchat-ghost []
4.6 fa-snapchat-square []
4.7 fa-snowflake-o []
4.2 fa-soccer-ball-o (alias) []
fa-sort []
fa-sort-alpha-asc []
fa-sort-alpha-desc []
fa-sort-amount-asc []
fa-sort-amount-desc []
fa-sort-asc []
fa-sort-desc []
fa-sort-down (alias) []
fa-sort-numeric-asc []
fa-sort-numeric-desc []
fa-sort-up (alias) []
4.1 fa-soundcloud []
4.1 fa-space-shuttle []
fa-spinner []
4.1 fa-spoon []
4.1 fa-spotify []
fa-square []
fa-square-o []
4.0 fa-stack-exchange []
fa-stack-overflow []
fa-star []
fa-star-half []
fa-star-half-empty (alias) []
fa-star-half-full (alias) []
fa-star-half-o []
fa-star-o []
4.1 fa-steam []
4.1 fa-steam-square []
fa-step-backward []
fa-step-forward []
fa-stethoscope []
4.4 fa-sticky-note []
4.4 fa-sticky-note-o []
fa-stop []
4.5 fa-stop-circle []
4.5 fa-stop-circle-o []
4.3 fa-street-view []
fa-strikethrough []
4.1 fa-stumbleupon []
4.1 fa-stumbleupon-circle []
fa-subscript []
4.3 fa-subway []
fa-suitcase []
fa-sun-o []
4.7 fa-superpowers []
fa-superscript []
4.1 fa-support (alias) []
fa-table []
fa-tablet []
fa-tachometer []
fa-tag []
fa-tags []
fa-tasks []
4.1 fa-taxi []
4.7 fa-telegram []
4.4 fa-television []
4.1 fa-tencent-weibo []
fa-terminal []
fa-text-height []
fa-text-width []
fa-th []
fa-th-large []
fa-th-list []
4.6 fa-themeisle []
4.7 fa-thermometer (alias) []
4.7 fa-thermometer-0 (alias) []
4.7 fa-thermometer-1 (alias) []
4.7 fa-thermometer-2 (alias) []
4.7 fa-thermometer-3 (alias) []
4.7 fa-thermometer-4 (alias) []
4.7 fa-thermometer-empty []
4.7 fa-thermometer-full []
4.7 fa-thermometer-half []
4.7 fa-thermometer-quarter []
4.7 fa-thermometer-three-quarters []
fa-thumb-tack []
fa-thumbs-down []
fa-thumbs-o-down []
fa-thumbs-o-up []
fa-thumbs-up []
fa-ticket []
fa-times []
fa-times-circle []
fa-times-circle-o []
4.7 fa-times-rectangle (alias) []
4.7 fa-times-rectangle-o (alias) []
fa-tint []
fa-toggle-down (alias) []
4.0 fa-toggle-left (alias) []
4.2 fa-toggle-off []
4.2 fa-toggle-on []
fa-toggle-right (alias) []
fa-toggle-up (alias) []
4.4 fa-trademark []
4.3 fa-train []
4.3 fa-transgender []
4.3 fa-transgender-alt []
4.2 fa-trash []
fa-trash-o []
4.1 fa-tree []
fa-trello []
4.4 fa-tripadvisor []
fa-trophy []
fa-truck []
4.0 fa-try []
4.2 fa-tty []
fa-tumblr []
fa-tumblr-square []
4.0 fa-turkish-lira (alias) []
4.4 fa-tv (alias) []
4.2 fa-twitch []
fa-twitter []
fa-twitter-square []
fa-umbrella []
fa-underline []
fa-undo []
4.6 fa-universal-access []
4.1 fa-university []
fa-unlink (alias) []
fa-unlock []
fa-unlock-alt []
fa-unsorted (alias) []
fa-upload []
4.5 fa-usb []
fa-usd []
fa-user []
4.7 fa-user-circle []
4.7 fa-user-circle-o []
fa-user-md []
4.7 fa-user-o []
4.3 fa-user-plus []
4.3 fa-user-secret []
4.3 fa-user-times []
fa-users []
4.7 fa-vcard (alias) []
4.7 fa-vcard-o (alias) []
4.3 fa-venus []
4.3 fa-venus-double []
4.3 fa-venus-mars []
4.3 fa-viacoin []
4.6 fa-viadeo []
4.6 fa-viadeo-square []
fa-video-camera []
4.4 fa-vimeo []
4.0 fa-vimeo-square []
4.1 fa-vine []
fa-vk []
4.6 fa-volume-control-phone []
fa-volume-down []
fa-volume-off []
fa-volume-up []
fa-warning (alias) []
4.1 fa-wechat (alias) []
fa-weibo []
4.1 fa-weixin []
4.3 fa-whatsapp []
4.0 fa-wheelchair []
4.6 fa-wheelchair-alt []
4.2 fa-wifi []
4.4 fa-wikipedia-w []
4.7 fa-window-close []
4.7 fa-window-close-o []
4.7 fa-window-maximize []
4.7 fa-window-minimize []
4.7 fa-window-restore []
fa-windows []
fa-won (alias) []
4.1 fa-wordpress []
4.6 fa-wpbeginner []
4.7 fa-wpexplorer []
4.6 fa-wpforms []
fa-wrench []
fa-xing []
fa-xing-square []
4.4 fa-y-combinator []
4.1 fa-y-combinator-square (alias) []
4.1 fa-yahoo []
4.4 fa-yc (alias) []
4.1 fa-yc-square (alias) []
4.2 fa-yelp []
fa-yen (alias) []
4.6 fa-yoast []
fa-youtube []
fa-youtube-play []
fa-youtube-square []