Cards

Documentation for cards and card components.

Files

app/styles/modules/_cards.scss

Card

Card is created via .card class. Card can contain header .card_header, content .card_content and footer .card_footer as shown on example below.

Example:code

Header

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.

Code:
<div class="card">
  <header class="card_header">
    ...
  </header>
  <div class="card_content">
    ...
  </div>
  <footer class="card_footer">
    ...
  </footer>
</div>

Card article

Card article is created via .card class. Card has article inside with class .card_content content as sections with .card_section and .event-header class in the first section as shown on example below.

Example:code
Code:
<div class="card">
  <article class="card_content no-pad">
    <section class="card_section no-mrg no-pad">
      <div class="event-header">
        <div class="event-header_content">
          <h2 class="no-mrg-top">AromaSoul Elements Masaz</h2>
          <ul class="list-inline no-mrg event-header_more">
            <li class="event-header_more_item"><i class="icon icon-s">status</i> Scheduled</li>
            <li class="event-header_more_item"><i class="icon icon-s">clock</i> 60 min</li>
            <li class="event-header_more_item"><i class="icon icon-s">euro</i> 28</li>
          </ul>
        </div>
        <div class="event-header_action">
          <div class="btn-dropdown">
            <button class="btn btn-s btn-link btn-icon-only js-toggle" type="button" icononly="iconOnly" data-target="parent" data-toggle="dropdown"><i class="icon icon-m">more</i></button>
            <ul class="dropdown-list dropdown-list-right">
              <li><a class="dropdown-list_item">Action 1</a></li>
              <li><a class="dropdown-list_item">Action 2</a></li>
              <li><a class="dropdown-list_item">Action 3</a></li>
              <li><a class="dropdown-list_item">Action 4</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="card_section no-pad-bottom">
      <p>Lorem ipsum</p>
    </section>
    <section class="card_section no-pad-bottom">
      <h4 class="mrg-20-bottom no-mrg-top text-color-purple text-bold">Customer
        <p></p>
      </h4>
    </section>
  </article>
</div>

Appointment detail card

See example below.

Example:code
calendar-s Tue 15.5. 09:00
place Spaklinik, Room 04

Walter Lima

3.5 star

Code:
<div class="appointment-detail text-color-theme-300">
  <div class="row mrg-20-bottom">
    <div class="appointment-detail-date col col-l-4 col-s-12"><i class="icon icon-s">calendar-s&nbsp;</i><span>Tue 15.5. 09:00</span></div>
    <div class="appointment-detail-location col col-l-8 col-s-12"><i class="icon icon-s">tooltip&nbsp;</i><span class="text-color-black text-bold">Spaklinik,&nbsp;</span><span>Room 04</span></div>
  </div>
  <div class="row">
    <div class="appointment-detail-assignee list-figure list-figure_normal col col-l-12"><img class="mrg-10-right avatar" src="/images/avatar.png">
      <div>
        <p class="no-mrg text-bold"><span>Walter&nbsp;</span><span class="text-color-black">Lima</span></p>
        <p class="no-mrg assignee-rating">3.5&nbsp;<i class="icon icon-s text-color-yellow">star</i></p>
      </div>
    </div>
  </div>
</div>

Rating card

See example below. For more details about rating picker click here.

Example:code
How satisfied are you with your service?
Trash
Bad
Okay
Satisfied
Excellent
Code:
<div class="card card--rating">
  <div class="card_content card_content--rating">
    <div class="text-center mrg-15-bottom">How satisfied are you with your service?</div>
    <div class="d-flex flex-justify-center">
      <div class="rating-picker">
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--1"></div>
          <div class="rating-picker__item-description">Trash</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--2"></div>
          <div class="rating-picker__item-description">Bad</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--3"></div>
          <div class="rating-picker__item-description">Okay</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--4"></div>
          <div class="rating-picker__item-description">Satisfied</div>
        </a>
        <a class="rating-picker__item" href="javascript:;">
          <div class="rating-picker__item-image rating-picker__item-image--5"></div>
          <div class="rating-picker__item-description">Excellent</div>
        </a>
      </div>
    </div>
  </div>
</div>