Boxes Components | AdminLTE 3 Documentation
Description: AdminLTE v3 Documentaion

Boxes Components | AdminLTE v3 Documentaion

# Boxes Components

There are two types of boxes, info boxes & small boxes. Both boxes are used to display statistical snippets.

##### Info Box

Messages 1,410
Bookmarks 410
Uploads 13,648

    <div class="info-box">
      <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Messages</span>
        <span class="info-box-number">1,410</span>
      </div>
    </div>

    <div class="info-box bg-success">
      <span class="info-box-icon"><i class="far fa-flag"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Bookmarks</span>
        <span class="info-box-number">410</span>
      </div>
    </div>

    <div class="info-box bg-gradient-warning">
      <span class="info-box-icon"><i class="far fa-copy"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Uploads</span>
        <span class="info-box-number">13,648</span>
      </div>
    </div>

> ##### Note!

> To wrap the text in to a new line add to the info-box-text the class text-wrap. To truncate the text with … add to the info-box-content the class text-truncate. (Here you should add a tooltip to display the whole pharse)

##### Info Box with Progress Bar

Bookmarks 41,410
70% Increase in 30 Days
Likes 41,410
70% Increase in 30 Days
Events 41,410
70% Increase in 30 Days

    <div class="info-box">
      <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Bookmarks</span>
        <span class="info-box-number">41,410</span>
        <div class="progress">
          <div class="progress-bar bg-info" style="width: 70%"></div>
        </div>
        <span class="progress-description">
          70% Increase in 30 Days
        </span>
      </div>
    </div>

    <div class="info-box bg-success">
      <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Likes</span>
        <span class="info-box-number">41,410</span>
        <div class="progress">
          <div class="progress-bar" style="width: 70%"></div>
        </div>
        <span class="progress-description">
          70% Increase in 30 Days
        </span>
      </div>
    </div>

    <div class="info-box bg-gradient-warning">
      <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
      <div class="info-box-content">
        <span class="info-box-text">Events</span>
        <span class="info-box-number">41,410</span>
        <div class="progress">
          <div class="progress-bar" style="width: 70%"></div>
        </div>
        <span class="progress-description">
          70% Increase in 30 Days
        </span>
      </div>
    </div>

##### Small Box

### 150

New Orders

More info

### 44

User Registrations

More info

    <div class="small-box bg-info">
      <div class="inner">
        <h3>150</h3>
        <p>New Orders</p>
      </div>
      <div class="icon">
        <i class="fas fa-shopping-cart"></i>
      </div>
      <a href="#" class="small-box-footer">
        More info <i class="fas fa-arrow-circle-right"></i>
      </a>
    </div>

    <div class="small-box bg-gradient-success">
      <div class="inner">
        <h3>44</h3>
        <p>User Registrations</p>
      </div>
      <div class="icon">
        <i class="fas fa-user-plus"></i>
      </div>
      <a href="#" class="small-box-footer">
        More info <i class="fas fa-arrow-circle-right"></i>
      </a>
    </div>

##### Loading Style

To simulate a loading state, simply place this code before the `.info-box` / `.small-box` closing tag.

> ##### Tip!

> We recommend `.fa-2x` for Info Boxes and `.fa-3x` for Small Boxes to get a nicely sized loading icon,
> like in this documentation.

    <div class="overlay">
      <i class="fas fa-2x fa-sync-alt fa-spin"></i>
    </div>

Messages 1,410
Bookmarks 41,410
70% Increase in 30 Days

### 150

New Orders

More info

You can also use a dark loading style with adding `.dark` to `.overlay` like this code.

    <div class="overlay dark">
      <i class="fas fa-2x fa-sync-alt fa-spin"></i>
    </div>

Messages 1,410
Bookmarks 41,410
70% Increase in 30 Days

### 150

New Orders

More info