aConic Admin Documentation - v1.0

Version - 1.0.0 Help

Cards

aConic card provide a flexible and extensible content container with multiple variants and options.
Bootstrap Cards documentation

Basic example

Below is an example of a basic card with mixed content and a fixed width.

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

                                          
    <div class="card" style="max-width: 18rem;">
        <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <p class="card-text">
                <small class="text-muted">Last updated 5 mins ago</small>
            </p>
        </div>
    </div> 
                                      

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag.

                                            
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h6 class="card-subtitle mb-1 text-muted mt-0">Card subtitle</h6>
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
    </div> 
                                        

Header

Add an optional header within a card. By default .card-header is set to display: flex; and justify-content: space-between; and align-items: center;.

Featured

2 days ago
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
                                          
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button> 
                                      

Featured

2 days ago

With supporting text below as a natural lead-in to additional content.

                                            
    <div class="card">
    <div class="card-header bg-white">
        <div class="row">
            <div class="col">
            <h3 class="card-header-title mb-0">Featured</h3>
            </div>
            <div class="col-auto">
            <small class="text-muted">2 days ago</small>
            </div>
        </div>
    </div>
    <div class="card-body">
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
    </div> 
                                        

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
                                            
    <div class="card">
        <div class="card-body">
          This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
        </div>
    </div> 
                                        

Footer

Add an optional footer within a card.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
                                            
    <div class="card">
        <div class="card-body">
          <h3 class="card-title">Special title treatment</h3>
          <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
        <div class="card-footer bg-white">
          2 days ago
        </div>
    </div> 
                                        

Images

Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

                                            
    <div class="card">
        <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div> 
                                        
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
                                            
    <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img class="card-img-bottom" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
    </div> 
                                        

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Card image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
                                            
    <div class="card text-white">
        <img class="card-img card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Card image cap">
        <div class="card-img-overlay">
          <h5 class="card-title text-white">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <small class="card-text">Last updated 3 mins ago</small>
        </div>
    </div> 
                                        

Heads up! Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

                                            
    <div class="card mb-3" style="max-width: 750px;">
        <div class="row g-0">
          <div class="col-md-4">
              <img class="img-fluid" src="../../assets/img/login-banner-05.jpg" alt="Card image">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
        </div>
    </div> 
                                        

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Image Description
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Image Description
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Image Description
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

                                            
    <div class="card-group">
        <div class="card">
          <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

        <div class="card">
            <img class="card-img-top" src="../../assets/img/login-banner-05.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>

        <div class="card">
            <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
    </div> 
                                        

When using card groups with footers, their content will automatically line up.

Image Description
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Image Description
Card title

This card has supporting text below as a natural lead-in to additional content.

Image Description
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

                                            
    <div class="card-group">
        <div class="card">
          <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card-footer bg-white">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>

        <div class="card">
            <img class="card-img-top" src="../../assets/img/login-banner-05.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
          </div>
          <div class="card-footer bg-white">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>

        <div class="card">
            <img class="card-img-top" src="../../assets/img/login-banner-03.jpg" alt="Image Description">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          </div>
          <div class="card-footer bg-white">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
    </div>