Cards

Overview

Cards are used to apply a container around a related grouping of information.

About

To initialize a card, apply the c-card class to an <div> element. Is conformed of 2 sections, a header and a body.

Card title

Card content

This variant is used for dashboards that need easy access to modules, each card has extra information that shows up on hover to learn more of the module link.

Content visibility is toggled via the header button. To make cards content visible, the section is given the class is-open, changing the display of the content div to block.

<!-- Card link list starts -->
<ul class="o-grid-flow c-card--big-link__list">
  <li class="c-card--big-link__item">
    <!-- Card link starts -->
    <a href="#0" class="c-card c-card--big-link c-card--big-link--well">
      <svg class="o-icon o-icon--display" aria-hidden="true">
          <use href="#chart-dot"></use>
      </svg>
      <h3 class="c-card--big-link__name">Well analysis</h3>
      <p class="c-card--big-link__description">Review and analyze your well profile data taken from well-site tubing inspections and compare them to critical guiding, gyro and sucker rod data.</p>
    </a>
    <!-- Card link ends -->
  </li>
  <li class="c-card--big-link__item">
    <!-- Card link starts -->
    <a href="#0" class="c-card c-card--big-link c-card--big-link--inventory">
      <svg class="o-icon o-icon--display" aria-hidden="true">
          <use href="#inventory"></use>
      </svg>
      <h3 class="c-card--big-link__name">Inventory</h3>
      <p class="c-card--big-link__description">All of your current inventory with RTS for both sucker rods and tubing with easy to use filters to help you find exactly what you are looking for.</p>
    </a>
    <!-- Card link ends -->
  </li>
  <li class="c-card--big-link__item">
    <!-- Card link starts -->
    <a href="#0" class="c-card c-card--big-link c-card--big-link--history">
      <svg class="o-icon o-icon--display" aria-hidden="true">
          <use href="#clock"></use>
      </svg>
      <h3 class="c-card--big-link__name">Order history</h3>
      <p class="c-card--big-link__description">All your orders, related documentation and current statuses with powerfull filters to quickly sort and locate orders by type or well name.</p>
    </a>
    <!-- Card link ends -->
  </li>
</ul>
<!-- Card link list ends -->
Design System