starlight
Navigation

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Larry Smith

Yesterday, 8:34pm

When, while the lovely valley teems with vapour around me, and the meridian sun strikes...

Donna Seay

Jan 23, 2:32am

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

View More Messages

Suzzeth Bungaos tagged you and 18 others in a post.

October 03, 2017 8:45am

Mellisa Brown appreciated your work The Social Network

October 02, 2017 12:44am

20+ new items added are for sale in your Sale Group

October 01, 2017 10:20pm

Julius Erving wants to connect with you on your conversation with Ronnie Mara

October 01, 2017 6:08pm

Suzzeth Bungaos tagged you and 12 others in a post.

September 27, 2017 6:45am

10+ new items added are for sale in your Sale Group

September 28, 2017 11:30pm

Mellisa Brown appreciated your work The Great Pyramid

September 26, 2017 11:01am

Julius Erving wants to connect with you on your conversation with Ronnie Mara

September 23, 2017 9:19pm

##### Cards

A card is a flexible and extensible content container that includes options for headers and footers, etc.

###### Card Body

An example some text within a card body.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

    <div class="card card-body">
      <p class="card-text">...</p>
    </div><!-- card -->

###### Card Titles, Text and Links

An example of using card title. In the same way, links are added and placed next to each other by adding link tag.

##### The Card Title

This is the card subtitle

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

Card link Another link

##### The Card Title

This is the card subtitle

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

Card link Another link

##### The Card Title

This is the card subtitle

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

Card link Another link

Source Code

    <div class="card">
      <div class="card-body">
        <h5 class="card-title">The Card Title</h5>
        <p class="card-subtitle">This is the card subtitle</p>
        <p class="card-text">...</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div><!-- card -->

###### Card Image Top

Places an image to the top of the card.

###### How to Be a Good Leader

March 21, 2017 8:30pm

###### Card Image Bottom

Places an image to the bottom of the card.

###### How to Be a Good Leader

March 21, 2017 8:30pm

###### Image Overlays

Turn an image into a card background and overlay your card’s text.

###### The Cat Prisoner

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

###### The Ghost Town

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

###### The Green Leaves

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Read more

Source Code

    <div class="card bd-0">
      <img class="card-img img-fluid" src="../img/img11.jpg" alt="Image">
      <div class="card-img-overlay pd-30 d-flex align-items-start flex-column">
        <h6 class="tx-white mg-b-15">The Green Leaves</h6>
        <p class="tx-white tx-white-7 mg-b-auto">...</p>
        <p class="mg-b-0"><a href="" class="tx-white">Read more</a></p>
      </div><!-- card-img-overlay -->
    </div><!-- card -->

###### Card Header With Color Variations

Add an optional header within a card.

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Description

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

    <div class="card bd-0">
      <div class="card-header card-header-default bg-primary">
        Description
      </div><!-- card-header -->
      <div class="card-body bd bd-t-0 rounded-bottom">
        ...
      </div><!-- card-body -->
    </div><!-- card -->

###### Card With Footer

Add an optional footer within a card.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

    <div class="card">
      <div class="card-body color-gray-lighter">...</div>
      <div class="card-footer">
        ...
      </div><!-- card-footer -->
    </div><!-- card -->

###### Card With Navigation

Add a navigation in header of a card.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

Source Code

    <div class="card bd-0">
      <div class="card-header bg-dark">
        <ul class="nav nav-tabs nav-tabs-for-dark card-header-tabs">
          <li class="nav-item">
            <a class="nav-link bd-0 active pd-y-8" href="#">Popular</a>
          </li>
          <li class="nav-item">
            <a class="nav-link bd-0 tx-gray-light" href="#">Recent</a>
          </li>
        </ul>
      </div><!-- card-header -->
      <div class="card-body">...</div>
    </div><!-- card -->

###### Background Variants

Cards include their own variant classes for quickly changing card background.

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.
Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur.

Source Code

    <div class="card card-body tx-white bg-dark bd-0">
      Some quick example text to build on the card title...
    </div><!-- card -->

###### Card with Buttons & Options

Cards with some options in the right corner of header of card.

###### Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

###### Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

###### Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...

###### Some Information

Some quick example text to build on the card title and make up the bulk of the card's content. Lorem ipsum dolor sit amet consictetur...