Cards

FDS cards provide a flexible and extensible content container with multiple variants and options.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. cards can replace old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

By default there is no card shadow, if shadow is required on card, use this class has--shadow, has--solid--shadow on image parent.

How to import card styles:

In order to use cards in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/card

How to customize card styles:

In order to customize cards in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/card

Default

Box Shadow

Solid Shadow

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor, sed do eiusmod tempor.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit”

Lorem ipsum dolor

Lorem ipsum dolor sit amet adipiscing!

Lorem ipsum

Lorem ipsum dolor sit amet adipiscing!

Lorem ipsum

<!--Simple Card-->
<div class="fds-card">
    <figure class="m--0">
      <img src"../../images/img-01.png" alt="image description">
    </figure>
</div>
<!--Shadow Card-->
<div class="fds-card">
    <figure class="m--0 has--shadow">
      <img src"../../images/img-01.png" alt="image description">
    </figure>
</div>
<!--Solid Shadow Card-->
<div class="fds-card">
    <figure class="mb--5 mr--5 has--solid--shadow">
      <img src"../../images/img-01.png" alt="image description">
    </figure>
</div>

<div class="col--4 d--flex mb--5">
  <div class="fds-card d--flex align--items--center flex--column has--shadow p--5 text--center">
    <div class="fds-card-head text--center">
      <span class="icon-DesignThinking mb--5"></span>
      <h3 class="mb--5">Lorem Ipsum</h3>
    </div>
    <div class="fds-card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
    </div>
    <div class="fds-card-footer">
      <button class="btn btn--primary--outline">Lorem Ipsum</button>
    </div>
  </div>
</div>

<div class="col--4 d--flex mb--5">
  <div class="fds-card d--flex align--items--center flex--column has--shadow p--5 text--center">
    <div class="fds-card-head text--center">
      <span class="icon-DesignThinking mb--5"></span>
      <h3 class="mb--5">Lorem Ipsum</h3>
    </div>
    <div class="fds-card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </div>
    <div class="fds-card-footer ">
      <button class="btn btn--primary--outline">Lorem Ipsum</button>
    </div>
  </div>
</div>

<div class="col--4">
  <div class="fds-card d--flex align--items--center flex--column has--shadow p--5">
    <div class="fds-card-head mb--5 text--center">
      <h2 class="m--0">Lorem Ipsum</h2>
      <span class="divider"></span>
      <h3 class="m--0">Lorem Ipsum </h3>
    </div>
    <div class="fds-card-body text--left">
      <p class="m--0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt, consectetur adipiscing elit, sed do eiusmod tempor, sed do eiusmod tempor.</p>
    </div>
  </div>
</div>

<div class="col--4 d--flex">
  <div class="fds-card d--flex align--items--center flex--column border text--center p--5">
    <figure>
      <img src="../../images/img-01.png" alt="image description">
    </figure>
    <div class="fds-card-body">
      <p>Lorem ipsum dolor sit amet adipiscing!</p>
    </div>
    <div class="fds-card-footer ">
      <h3 class="m--0">Lorem ipsum dolor</h3>
    </div>
  </div>
</div>

<div class="col--4 d--flex">
  <div class="fds-card d--flex align--items--center flex--column border border-primary has--solid--shadow--primary p--5">
    <figure class="m--0 d--flex justify--content--center">
      <img src="../../images/img-01.png" alt="image description">
    </figure>
    <div class="fds-card-body mb--5 text--center">
      <p class="m--0">Lorem ipsum dolor sit amet adipiscing!</p>
    </div>
    <div class="fds-card-footer">
    <a class="btn btn--primary--outline" href="javascript:void(0);">Lorem ipsum</a>
    </div>
  </div>
</div>

<div class="col--4 d--flex">
  <div class="fds-card d--flex align--items--center flex--column border border-secondary has--solid--shadow--secondary p--5">
    <figure class="m--0 d--flex justify--content--center">
      <img src="../../images/img-01.png" alt="image description">
    </figure>
    <div class="fds-card-body mb--5 text--center">
      <p class="m--0">Lorem ipsum dolor sit amet adipiscing!</p>
    </div>
    <div class="fds-card-footer">
      <a class="btn btn--secondary--outline" href="javascript:void(0);">Lorem ipsum</a>
    </div>
  </div>
</div>