Component

Cards are a unit of content, they typically have an image, a heading, and a small amount of copy. They are often used as links.

iconsCard

card graphic
Better Together
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque minima itaque sint! Doloremque odio quia saepe. 
<div class="ray-card" style="max-width: 400px;">
  <div class="ray-card__image ray-image ray-image--16by9">
    <img
      src="https://source.unsplash.com/random/800x450?minimalist"
      alt="card graphic"
    />
  </div>

  <div class="ray-card__content">
    <div class="ray-card__heading">Better Together</div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
      minima itaque sint! Doloremque odio quia saepe.
    </div>
  </div>
</div>

iconsCard (RTL)

card graphic
יחד טוב יותר
תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים. צילום ננקטת בקר ב, עוד ביולי והגולשים. 
<div dir="rtl">
  <div class="ray-card" style="max-width: 400px;">
    <div class="ray-card__image ray-image ray-image--16by9">
      <img
        src="https://source.unsplash.com/random/800x450?minimalist"
        alt="card graphic"
      />
    </div>

    <div class="ray-card__content">
      <div class="ray-card__heading">יחד טוב יותר</div>
      <div>
        תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים.
        צילום ננקטת בקר ב, עוד ביולי והגולשים.
      </div>
    </div>
  </div>
</div>

iconsCard as a row

card graphic
Better Together
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque minima itaque sint! Doloremque odio quia saepe. 
<div class="ray-card ray-card--row">
  <div class="ray-card__image ray-image ray-image--16by9">
    <img
      src="https://source.unsplash.com/random/800x450?minimalist"
      alt="card graphic"
    />
  </div>

  <div class="ray-card__content">
    <div class="ray-card__heading">Better Together</div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
      minima itaque sint! Doloremque odio quia saepe.
    </div>
  </div>
</div>

iconsCard as a row (RTL)

card graphic
יחד טוב יותר
תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים. צילום ננקטת בקר ב, עוד ביולי והגולשים. 
<div dir="rtl">
  <div class="ray-card ray-card--row">
    <div class="ray-card__image ray-image ray-image--16by9">
      <img
        src="https://source.unsplash.com/random/800x450?minimalist"
        alt="card graphic"
      />
    </div>

    <div class="ray-card__content">
      <div class="ray-card__heading">יחד טוב יותר</div>
      <div>
        תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים.
        צילום ננקטת בקר ב, עוד ביולי והגולשים.
      </div>
    </div>
  </div>
</div>

iconsCard as a link

<a
  href="https://wework.com"
  target="_blank"
  rel="noopener noreferrer"
  class="ray-card ray-card--link"
  style="max-width: 400px;"
>
  <div class="ray-card__image ray-image ray-image--16by9">
    <img
      src="https://source.unsplash.com/random/800x450?minimalist"
      alt="card graphic"
    />
  </div>

  <div class="ray-card__content">
    <div class="ray-card__heading">Better Together</div>

    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque
      minima itaque sint! Doloremque odio quia saepe.
    </div>
  </div>
</a>

iconsCard as a link (RTL)

<div dir="rtl">
  <a
    href="https://wework.com"
    target="_blank"
    rel="noopener noreferrer"
    class="ray-card ray-card--link"
    style="max-width: 400px;"
  >
    <div class="ray-card__image ray-image ray-image--16by9">
      <img
        src="https://source.unsplash.com/random/800x450?minimalist"
        alt="card graphic"
      />
    </div>

    <div class="ray-card__content">
      <div class="ray-card__heading">יחד טוב יותר</div>

      <div>
        תרומה גרמנית אל לוח, דת חפש ספינות טבלאות. מלא גם תרבות לחיבור חרטומים.
        צילום ננקטת בקר ב, עוד ביולי והגולשים.
      </div>
    </div>
  </a>
</div>

iconsModifiers

Use these modifiers with .ray-card class.

SelectorDescription
.ray-card--linkSelector for applying link and hover styles
.ray-card--rowSelector for applying row direction