Card

The Card provides a flexible and extensible content container with multiple variants and options.

content

Demo

Standard card

To create a Card, use the .adv-card and .card classes.


Please follow these guidelines:

  • Elements : The item title and link are required. Please include at least one additional piece of information.

  • Sequence : Please keep the elements in their original sequence. The sequence of secondary information can be changed depending on the situation.

  • Buttons : The primary button should be on the left and should link to the same URL as the card. The secondary button should be on the right.

Image name

Card Item Title

Secondary Information

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Primary btn Secondary btn 
<div class="module adv-card card"> 
  <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
  <div class="card-wrapper">
    <div class="card-img-wrap"> 
		<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> 
	</div>
    <div class="card-body">
      <h3 class="card-info-title">Card Item Title</h3>
      <h4 class="card-subtitle">Secondary Information</h4>
      <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
  <div class="card-btn"> 
	<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">Primary btn</a> 
	<a href="javascript:void(0)" class="btn btn-secondary rounded-0" aria-label="view more ___ information">Secondary btn</a> 
  </div>
</div>

Mask card

A card contain images、 item titles and secondary information, descriptions and buttons are not displayed for this type.

Adding .card-mask-light class for light color masks.

Image name

Lorem ipsum dolor sited amet

Secondary Information

<div class="module adv-card card card-mask-light">
    <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
        <div class="card-img-wrap"> 
            <img src="images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
        </div>
        <div class="card-body">
            <h3 class="card-info-title">Lorem ipsum dolor sited amet</h3>
            <h4 class="card-subtitle">Secondary Information</h4>
       </div>
     </div>
</div>

Adding .card-mask-dark class for dark color mask.

Image name

Lorem ipsum dolor sited amet

Secondary Information

<div class="module adv-card card card-mask-dark">
    <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
        <div class="card-img-wrap"> 
            <img src="images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
        </div>
        <div class="card-body">
            <h3 class="card-info-title">Lorem ipsum dolor sited amet</h3>
            <h4 class="card-subtitle">Secondary Information</h4>
       </div>
     </div>
</div>

Card deck

Use the .card-deck class to create cards with equal width and height.

The position of the buttons will be aligned.

If the content of the card is too long, it will be hidden.

Image name

Lorem ipsum dolor sited

Secondary Information

Sed ut perspiciatis unde omnis iste natus error sit.

View More
Image name

Lorem ipsum dolor sited

Secondary Information

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

View More
Image name

Lorem ipsum dolor sited Lorem ipsum dolor sited Lorem ipsum dolor sited

Secondary Information

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

View More 
<div class="module adv-card-deck card-deck"> 
  <div class="module adv-card card"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <div class="card-btn"> 
	<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> 
      </div>
    </div>
  </div>
  <div class="module adv-card card"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <div class="card-btn"> 
	<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> 
      </div>
    </div>
  </div>
  <div class="module adv-card card"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <div class="card-btn"> 
	<a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> 
      </div>
    </div>
  </div>
</div>

Card group

Using .card-group-complex class to grouping cards.

Image name

Lorem ipsum dolor sited

Secondary Information

Image name

Lorem ipsum dolor sited

Secondary Information

Image name

Lorem ipsum dolor sited

Secondary Information

<div class="module card-group-complex clearfix">
  <div class="module adv-card card card-mask-dark">
      <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap">
          <img src="images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
      </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
      </div>
    </div>
  </div>
  <div class="module adv-card card card-mask-dark">
      <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap">
          <img src="images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
      </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
      </div>
    </div>
  </div>
  <div class="module adv-card card card-mask-dark">
      <a href="#" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap">
          <img src="images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0">
      </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
      </div>
    </div>
  </div>
</div>

Card Carousel

If you have a collection of cards, you can present them in a carousel effect.

<div id="main-card-inner" class="module adv-key-visual-carousel adv-card-deck adv-key-visual-dark owl-carousel owl-theme">
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
  <div class="module adv-card card banner-item"> <a href="javascript:void(0)" class="card-linkmask" aria-label="view more ___ information"></a>
    <div class="card-wrapper">
      <div class="card-img-wrap"> <img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" alt="Image name" class="card-img-top img-fluid rounded-0"> </div>
      <div class="card-body">
        <h3 class="card-info-title">Lorem ipsum dolor sited</h3>
        <h4 class="card-subtitle">Secondary Information</h4>
        <p class ="card-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>
      <div class="card-btn"> <a href="javascript:void(0)" class="btn btn-primary rounded-0" aria-label="view more ___ information">View More</a> </div>
    </div>
  </div>
</div>

Example

  • Grid Markup : Using the grid, wrap cards in columns and rows as needed.
Image name

Lorem ipsum dolor sited

12/12/2022 | Case Study

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Image name

Lorem ipsum dolor sited

12/12/2022 | Case Study

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

  • Different Content Combination : When there is no suitable information, can remove the html tags.
Image name

Lorem ipsum dolor sited amet

12/12/2022 | Case Study

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Primary btn
Image name

Lorem ipsum dolor sited lormameter consectetur lormder ipsum dolor sited beatae.

12/12/2022 | Case Study

  • Card without image : Can also remove the html tag <div class="card-img-wrap"> if there is no image.
Image name

Lorem ipsum dolor sited amet

12/12/2022 | Case Study

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Primary btn

Lorem ipsum dolor sited amet

12/12/2022 | Case Study

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Primary btn

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/card.css">

<!-- Only use when you need carousel effect, please put before card.css-->
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/owl.carousel.css">

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/card.js"></script>
							
<!-- Only use when you need carousel effect -->							
<script src="https://advcloudfiles.advantech.com/web/jQuery/jquery-1.8.2.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/owl.carousel.js"></script>
<script src="https://advcloudfiles.advantech.com/web/lib/advantech-lib/initOwlCarousel.js"></script>

Call the Card carousel via JavaScript:

$(document).ready(() => {
    initOwlCarousel('#main-card-inner', true, true, 20, 1, 1, 3);
});

Card Carousel includes an optional JavaScript component.

initOwlCarousel(selector, loop, autoplay, margin, itemsForMobile, itemsForPad, itemForPC);

Parameters

selector (String) The CSS selector for the Owl Carousel container
loop (Boolean) Enable or disable the infinite loop
autoplay (Boolean) Enable or disable autoplay
margin (Number) Margin between items
itemsForMobile (Number) Number of items to display on mobile devices
itemsForPad (Number) Number of items to display on tablets
itemForPC (Number) Number of items to display on PCs

content