Category Cards

The category cards are used everywhere on the website to link between pages

Below you will find the different definitions and options to create your category cards

Overview

Global Definition
Sizes
States

Category Card Default

Category Cards Default Large
Category Cards Default Small
Category Cards Default Disabled
Category States Default

Category Card Dark Themed

Category Cards Large Dark Themed
Category Cards Small Dark Themed
Category Cards Disabled Dark Themed
Category States Dark Themed

Overview

Global Definition

Each category card is based on a global CSS class called "msds-category-card". It is important to include it first as it is the main CSS class. Without this HTML class, you cannot utalize component. There are 2 types of category cards, the primary category card, that has a content body below the headline, and the category card with no body below the headline.

Delete "msds-category-card__content" div to remove the body below the headline.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card ">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Sizes

Our cards can be rendered in 2 different sizes, large, and small as followed. In order to use small cards, add the following

"col-md-3" instead of "col-md-4"
"msds-category-card--small" to the same group of classes that has "msds-category-card"

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>

  <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

States

Each button has different states which are applied automatically: enabled, hover, active, focus and disabled. You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.

Hover on this card to see its hover state

Click on this card to see its active/focus states

You can not click on disabled category cards

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">HOVER ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">CLICK ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">DISABLED CARD</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
        </div>
      </div>
    </div>
  </div>
</div>

Category Card Default

The default category card is a light themed, blue card.

Category Cards Default Large

The default large category card can be used by wrapping your "msds-category-card" block with a "col-md-4" from Bootstrap. Below is a example of the Milestone Large Category Card.

The default has content in the body of the card and has a preset width based on bootstrap columns "col-md-4".
The alternative has no body, to achieve this you can remove the body from the card.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card ">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Category Cards Default Small

Below is a example of the Milestone Small Themed Category Card.

The small cards have preset width based on bootstrap columns "col-md-3" and "msds-category-card--small" as an extra class at the same level as "msds-category-card".
The alternative has no body, to achieve this you can remove the body from the card.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Category Cards Default Disabled

Below is a example of the Milestone Disabled Category Card.

The disabled cards must have the "msds-category-card--disabled" modifier as an extra class at the same level as "msds-category-card" in order to disable the card. This applies to both large and small category cards.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Category States Default

Hover on this card to see its hover state

Click on this card to see its active/focus states

You can not click on disabled category cards

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">HOVER ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">CLICK ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">DISABLED CARD</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
        </div>
      </div>
    </div>
  </div>
</div>

Category Cards Dark Themed

To use “dark themed category card” you need to add the following CCS class: "msds-category-card--dark".

Below is a example of the Milestone Large Dark Themed Category Card.

The default has content in the body of the card and has a preset width based on bootstrap columns "col-md-4".
The alternative has no body, to achieve this you can remove the body from the card.

Category Cards Large Dark Themed

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Category Cards Small Dark Themed

Below is a example of the Milestone Small Dark Themed Category Card.

The small cards have preset width based on bootstrap columns "col-md-3" and "msds-category-card--small" as an extra class at the same level as "msds-category-card".
The alternative has no body, to achieve this you can remove the body from the card.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">Deployment Best Practices</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Category Cards Disabled Dark Themed

Below is a example of the Milestone Disabled Dark Themed Category Card.

The disabled cards must have the "msds-category-card--disabled" modifier as an extra class at the same level as "msds-category-card" in order to disable the card. This applies to both large and small category cards.

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ask ideas and share ideas and experiences.

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--small msds-category-card--dark msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">Ask ideas and share ideas and experiences.</div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-3">
      <div class="msds-category-card msds-category-card--dark msds-category-card--small msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">Deployment Best Practices</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Category States Dark Themed

Each button has different states which are applied automatically: hover, active, focus and disabled. You can see the different state by hovering, activating and focusing on them on the example below. The last button would disabled by default.

Hover on this card to see its hover state

Click on this card to see its active/focus states

You can not click on disabled category cards

<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">HOVER ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Hover on this card to see its hover state</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark">
        <a class="msds-category-card__link" href="#" alt="msds-category-cards">
          <div class="msds-category-card__header">
            <div class="msds-category-card__header-body">CLICK ON ME</div>
            <div class="msds-category-card__header-icon-container">
              <svg class="msds-category-card__header-icon">
                <use href="../../../msds-spritemap.svg#right-arrow" />
              </svg>
            </div>
          </div>
          <div class="msds-category-card__content">
            <div class="msds-category-card__content-body">Click on this card to see its active/focus states</div>
          </div>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="msds-category-card msds-category-card--dark msds-category-card--disabled">
        <div class="msds-category-card__header">
          <div class="msds-category-card__header-body">DISABLED CARD</div>
          <div class="msds-category-card__header-icon-container">
            <svg class="msds-category-card__header-icon">
              <use href="../../../msds-spritemap.svg#right-arrow" />
            </svg>
          </div>
        </div>
        <div class="msds-category-card__content">
          <div class="msds-category-card__content-body">You can not click on disabled category cards</div>
        </div>
      </div>
    </div>
  </div>
</div>

Digital Design System

The category cards are used everywhere on the website to link between pages

Table of contents

Overview

Global Definition

Sizes

States

Category Card Default

Category Cards Default Large

Category Cards Default Small

Category Cards Default Disabled

Category States Default

Category Cards Dark Themed

Category Cards Large Dark Themed

Category Cards Small Dark Themed

Category Cards Disabled Dark Themed

Category States Dark Themed