[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Cards

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

###### Card Block

An example some text within a card block.

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, bottom or overlay of the card.

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

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

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

Source Code

    <div class="card">
      <img class="card-img-top img-fluid" src="../img/img12.jpg" alt="Image">
      <div class="card-body">
        <p class="card-text">...</p>
      </div>
    </div><!-- card -->

###### Card Image Bottom

Places an image to the top, bottom or overlay of the card.

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

March 21, 2017 8:30pm

###### Why You're Not a Leader

March 22, 2017 6:30pm

###### Talk Like a Leader

March 23, 2017 1:30pm

Source Code

    <div class="card">
      <div class="card-body">
        <p class="card-text">...</p>
      </div>
      <img class="card-img-bottom img-fluid" src="../img/img12.jpg" alt="Image">
    </div><!-- card -->

###### 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...

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 bg-primary">
        Description
      </div><!-- card-header -->
      <div class="card-body bd bd-t-0 rounded-bottom">
        ...
      </div><!-- card-body -->
    </div><!-- card -->

Class Reference

Class | Value
--- | ---
`class="card-header bg-[value]"` | SOLID: primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark GRADIENT: mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

###### 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...
Recent content goes here...
Top rated content goes here...
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...
Recent content goes here...
Top rated content goes here...

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>
          <li class="nav-item">
            <a class="nav-link bd-0 tx-gray-light" href="#">Top Rated</a>
          </li>
        </ul>
      </div><!-- card-header -->
      <div class="card-body">...</div>
    </div><!-- card -->

Class Reference

Class | Description
--- | ---
`class="card-header bg-[value]"` | Set a card header background. Could be any value from known color.
`nav-tabs-for-dark` | A styles that make the tabs better in dark background. Recommended for dark background of card header.
`card-header-tabs` | The style for nav tabs that would fit for card header. Required when adding tabs to card header.

###### 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.
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 -->

Class Reference

Class | Value
--- | ---
`class="card card-body bd-0 bg-[value]"` | SOLID: primary | success | warning | danger | info | indigo | purple | pink | orange | light | dark GRADIENT: mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

###### 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...