Cards

Code

<!-- Text only-->
<div class="cui card">
    <h6 class="category-title">Category title </h6>
    <h2>The article title goes here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#" target="_blank"> Aliquam at porttitor sem </a>.</p>
    <button class="cui btn-sm primary">Small primary</button>
</div>

<!-- With image -->
<!-- image (img) element with both a regular src attribute as well as a srcset attribute. The browser does the work of figuring out which image is best -->
<div class="cui card">
    <img src="image.jpg" alt="Identify the purpose of image"/>
    <h6 class="category-title">Category title </h6>
    <h2>The article title goes here</h2>
    <p>Lorem ipsum dolor <a href="#" target="_blank">sit amet</a>, consectetur adipiscing elit. Aliquam at porttitor sem.</p>
    <button class="cui btn-sm primary">Small primary</button>
</div>

<!-- With video -->
<!-- Example javascript to play the video -->
<script type="text/javascript">
    $(document).ready(function(){
    var videolink = "https://www.youtube.com/embed/PYzflRzOPhI";

    $(document).delegate('#card-youtube-1 .youtubePlayOverlay', 'click', function() {
        $(this).hide();
        $(this).parent().css('position', 'relative');
        $(this).parent().css('z-index', 3000);
        $('#card-youtube-1 iframe:first').show().attr('src', '' + videolink + '?autoplay=1');
    });

    }); // end document.ready
</script>

<div class="cui card">
    <div class="video-container" id="card-youtube-1">
     <button class="youtubePlayOverlay">
          <div class="video-thumbnail"  aria-label="select to play the video" tabindex="0" >
            <span></span>
          </div>
      </button>
      <iframe allowfullscreen="" frameborder="0" height="360" src="" style="display:none;" width="600"></iframe>

    </div>

    <h6 class="category-title">Category title </h6>
    <h2>The article title goes here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.</p>
    <a class="action-link" href="#" target="_blank">Action link</a>
</div>

Usage

Cards create a consistent experience regardless of device. Use a card layout when displaying content that:

• As a collection, comprises multiple data types, such as images, movies, and text
• Supports content of highly variable length
• Contains interactive content, such as buttons
• Would otherwise be in a grid list but needs to display more content to supplement the image

Video image

Original size: 767px × 431px
Retina display: 1534px × 862px

Code

<!-- Equal height cards require the Bootstrap flex grid -->
<div class="row row-equal-height-cards">
    <div class="col-sm-6 col-lg-4">
        <div class="cui card">
            <img src="image.jpg" alt="">
            <h6 class="category-title">Category title</h6>
            <h2>The article title goes here</h2>
            <p>Content goes here</p>
            <div class="card-footer">
                <a class="action-link" href="#">Action link</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="cui card">
            <img src="image.jpg" alt="">
            <h6 class="category-title">Category title</h6>
            <h2>The article title goes here</h2>
            <p>Content goes here</p>
            <div class="card-footer">
                <a class="action-link" href="#">Action link</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-4">
        <div class="cui card">
            <img src="image.jpg" alt="">
            <h6 class="category-title">Category title</h6>
            <h2>The article title goes here</h2>
            <p>Content goes here</p>
            <div class="card-footer">
                <a class="action-link" href="#">Action link</a>
            </div>
        </div>
    </div>
</div>