by Creative Tim

Components

Buttons

Pick your colour

We have worked over the original Bootstrap classes and added 2 more variations for black and white.



<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-black">Black</button>
<button class="btn btn-white">White</button>

<button class="btn btn-fill btn-default">Default</button>
<button class="btn btn-fill btn-primary">Primary</button>
<button class="btn btn-fill btn-info">Info</button>
<button class="btn btn-fill btn-success">Success</button>
<button class="btn btn-fill btn-warning">Warning</button>
<button class="btn btn-fill btn-danger">Danger</button>
<button class="btn btn-fill btn-black">Black</button>
<button class="btn btn-fill btn-white">White</button>
    			        


Pick your style

<button href="#fakelink" class="btn ">Default Button</button>
<button href="#fakelink" class="btn btn-fill">Filled Button</button>
<button href="#fakelink" class="btn btn-round">Round Button</button>
<button href="#fakelink" class="btn btn-simple">Simple Button</button>
                        

Pick your size

<button href="#fakelink" class="btn btn-fill btn-xs">Download</button>
<button href="#fakelink" class="btn btn-fill btn-sm">Download</button>
<button href="#fakelink" class="btn btn-fill">Download</button>
<button href="#fakelink" class="btn btn-fill btn-lg">Download</button>
                        

Text

If you want for text inside your pages to match the colour of the buttons, we have alsi created text classes.

Gray: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Primary: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Info: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Success: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Warning: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

Danger: In Greek mythology, Gaia was the personification of the Earth and one of the primordial deities.

<p class="text-gray"><b>Gray:</b> In Greek mythology...</p>
<p class="text-primary"><b>Primary:</b> In Greek mythology...</p>
<p class="text-info"><b>Info:</b> In Greek mythology...</p>
<p class="text-success"><b>Success:</b> In Greek mythology...</p>
<p class="text-warning"><b>Warning:</b> In Greek mythology...</p>
<p class="text-danger"><b>Danger:</b> In Greek mythology...</p>
                        

Labels

You can choose the colors that comes with the same options as the buttons.

Default Primary Info Success Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-info">Info</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

                        

Header Filters

When you are creating the headers for the pages, you have multiple filter options. Since the majority of headers also need a title, it is best to add a filter over the image you are using. You have the option to use filters that are full colour or have gradient colours. The basic, black class is 'filter'. If you want to add full colour you can choose from one of the following classes 'filter-color-[black/gold/green/blue/purple]'. If you want to add filters with gradient colours, you can choose from the following classes filter-gradient-[black/gold/green/blue/purple].



Typography

H1 Gaia was the great mother of all.

H2 Gaia was the great mother of all.

H3 Gaia was the great mother of all: the primal Greek Mother Goddess.

H4 Gaia was the great mother of all: the primal Greek Mother Goddess.

H5 Gaia was the great mother of all: the primal Greek Mother Goddess.
H6 Gaia was the great mother of all: the primal Greek Mother Goddess.

p Gaia was the great mother of all: the primal Greek Mother Goddess.



Font Icons

There are 202 Stroke Icons Handcrafted by our friends from Pixeden. View all icons here.

<i class="pe-7s-car"></i>

Cards

The general class for a card is called card. All cards have also a plain version, without the background and shadow, and you can reach it by using the card-plain class.


Blog Cards

The blog cards are defined by the card-blog class. They have an image as header and a content for extra informations like Date, Title, Category. If you do not want your card to be differentiated from the background, you can use the card-plain class.

<div class="card card-blog">
     <a href="#gaia" class="header">
         <img src="../assets/img/header-6.jpeg" class="image-header">
     </a>
     <div class="content">
         <h6 class="card-date">Feb 17</h6>
         <a href="#gaia" class="card-title">
             <h3>Nature &amp; The Catch of the Day</h3>
         </a>
         <div class="line-divider line-danger"></div>
         <h6 class="card-category">Nature</h6>
     </div>
 </div>

                        
<div class="card card-blog card-plain">
     <a href="#gaia" class="header">
         <img src="../assets/img/header-6.jpeg" class="image-header">
     </a>
     <div class="content">
         <h6 class="card-date">Feb 17</h6>
         <a href="#gaia" class="card-title">
             <h3>Nature &amp; The Catch of the Day</h3>
         </a>
         <div class="line-divider line-danger"></div>
         <h6 class="card-category">Nature</h6>
     </div>
 </div>

                        
You can also create a more stylish card adding the date inside a black area using the div with class circle-black like in this example:
Apr 12

We Are Here to Make Life Better

Life Tips & Tricks

Royère doesn't make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own The Pablo pop up was almost a pop up of influence.

<div class="card card-blog">
    <a href="blog-posts.html" class="header">
        <img src="../assets/img/header-7.jpeg" class="image-header">
    </a>
    <div class="content">
        <div class="circle-black">
            <div class="circle">
                <div class="date-wrapper">
                    <span class="month">Apr</span>
                    <span class="date">12</span>
                </div>
            </div>
        </div>
        <a href="blog-posts.html" class="card-title"><h3>We Are Here to Make Life Better</h3></a>
        <h6 class="card-category text-warning">Life Tips &amp; Tricks</h6>
        <p class="text-description text-gray">Royère doesn't make a Polar bear bed but the Polar bear couch is my favorite piece of furniture we own The Pablo pop up was almost a pop up of influence.</p>
    </div>
</div>

                        

Pricing Cards

We created a special set of classes designed to help you create your price options in your website. The price cards are defined using the class card-price. By default the pricing cards are gray, but you make them outstand using the classes: card-black or card-white.

free trial
month

0

15 Messages
5 Contacts
12/5 Support

<div class="card card-price">
    <div class="content">
        <h4 class="title-header">
            free trial
            <br>
            <small class="subtitle-header">month</small>
        </h4>
        <div class="price">
            <i class="fa fa-dollar"></i>
            <div class="number text-danger">0</div>
        </div>
        <p class="text-description">
            15 Messages<br>
            5 Contacts<br>
            <span>12/5 Support</span>
        </p>
        <div class="text-center">
            <button type="button" class="btn btn-danger btn-round btn-fill">
                Get Started
            </button>
        </div>
    </div>
</div>

                    

Info Area

Our information areas are created using icons,a title and a description. The default color for the icon is grey and you can use other colors by using the corresponding class text-{ primary | info | success | warning | danger }.

Delivery

We sketch your wardrobe down to the last detail and present it to you.

<div class="info-icon">
    <div class="icon text-danger">
        <i class="pe-7s-car"></i>
    </div>
    <h3>Delivery</h3>
    <p class="description">We sketch your wardrobe down to the last detail and present it to you.</p>
</div>

                    

Sections Colors

Each page from the archive is composed of parts called sections. Each section has modular information. As you will be able to see, there are sections that contain description, pictures, quotes, etc. Each section has 2 background possibilities. The default one, for the 'section' class is the white background. To use a gray background, you will need to add the 'section-gray' class.