Card

Add the classname dk-card to any wrapper element to add the card styles of background-color, border, border-radius and box-shadow. Cards by default do not have any padding or margin and will need that added as needed.

Code Example:

<div class="dk-card">
  Default card with no padding or margin.
</div>

<div class="dk-card p-2 my-2">
  Card using Tailwind to add padding and margin (p-2 adds 16px padding to all sides, my-2 adds 16px margin to top and bottom). 
</div>

Code Preview:

Interactive Card

If you have a card that requires interactive hover styles use the classname dk-card--interactive.

Code Example:

<div class="dk-card--interactive p-2">
  Interactive card showing hover effects. 
</div>

Code Preview:

Cards in Cards

When a card is placed inside another card the box shadow gets set to a border.

Code Example:

<div class="dk-card p-3">
        <div class="test-box">
            Card A
            <div class="dk-card p-3 my-2">
                Card B
                <div class="dk-card--interactive p-3 my-3">
                    Card C: The final Card
                </div>
            </div>
        </div>
    </div>

Code Preview:

Marketing Cards

This is an example of a marketing card with an image.

Code Example:

<div class="dk-card dk-card--marketing">
  <div class="dk-card--marketing__img">
    <img src="https://bit.ly/2TRyrfw" alt="Image Alt Text" />
  </div>
  <div class="dk-card--marketing__content">
    <h1 class="dk-card--marketing__title">
      With Button
    </h1>
    <p class="dk-card--marketing__snippet">
      A long but limited description
      that gives the user context about
      what product, service, or area
      they are clicking into, but not
      too much information as to
      overload them.
    </p>
    <button class="dk-btn__primary">
      Button Text
    </button>
  </div>
</div>

Code Preview: