Eventival Styleguide / Components / Cards

Cards

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Contained: a card is identifiable as a single, contained unit.
Independent: a card can stand alone, without relying on surrounding elements for context.
Individual: a card cannot merge with another card, or divide into multiple cards.

We are inspired by Google Material Desing.

Basic structure

<div class="card">
  <div class="card__heading">
    Card header
  </div>
  <div class="card__content">
    Some content
  </div>
</div>

Standard profile widget card

Tags²

Co-Founder & Co-Director at Datakal Director at Eventival Parent Board of Directors at MOFFOM

<div class="card card--demo">
  <div class="card__heading">
    <h3>Tags<sup title="All tags">2</sup></h3>
    <div class="card__actions">
      <i class="fal fa-edit js-edit-tag" data-gtm="people-profile-widgets-tags-edit-icon" title="Edit tags"></i>
    </div>
  </div>
  <div class="card__content">
    <span class="tag tag--action">Co-Founder & Co-Director at Datakal <a href="#"><i class="fal fa-external-link-square"></i></a></span>
    <span class="tag tag--action">Director at Eventival <a href="#"><i class="fal fa-search"></i></a></span>
    <span class="tag tag--action">Parent <a href="#"><i class="fal fa-search"></i></a></span>
    <span class="tag tag--action">Board of Directors at MOFFOM <a href="#"><i class="fal fa-external-link-square"></i></a></span>
    <span class="text-muted"><a class="text-muted" href="#">More</a> (3)</span>
  </div>
</div>

Table card

Card with no padding, header and content.

Groups archive

Edition	Group	Subgroup²
2017	Staff	Staff
2016	Staff	Programmer

<div class="card card--notpadded card--demo">
  <div class="card__heading">
    <h3>Groups archive</h3>
    <div class="card__actions">
      <i class="far fa-arrows-alt"></i>
      <i class="fas fa-star"></i>
      <i class="fal fa-star"></i>
      <i class="fas fa-star selected"></i>
    </div>
  </div>
  <div class="card__content">
    <table class="table--borderless">
      <thead>
        <tr>
          <th>Edition</th>
          <th>Group</th>
          <th>Subgroup<sup>2</sup></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2017</td>
          <td>Staff</td>
          <td>Staff</td>
        </tr>
        <tr>
          <td>2016</td>
          <td>Staff</td>
          <td>Programmer</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Empty card

If the content is empty, it is still better to show card so user can find it on the same place.

Store

No data at all

<div class="card card--demo card--empty">
  <div class="card__heading">
    <h3>Store</h3>
  </div>
  <div class="card__content">
    <p>No data at all</p>
  </div>
</div>

Card panel

For a simpler card with less markup, try using a card-panel which just has padding and a shadow effect

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="card-panel card--demo tw bg-mandy">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>