{"data":{"type":"contents","id":"components/card","attributes":{"html":"

Card

\n

A card component that serves as a content container for images, text and links. When used within grid layouts cards are expected to share the same content structure and matching height. For accessibility reasons cards should always be implemented as lists, and for this reason the <EsCard> component's root element is a <li> so it should always be wrapped in a <ul>.

\n

Here is an example of a card

\n
<ul class=\"list-unstyled layout\">\n  <li class=\"card  lg:col-2\">\n    <div class=\"card__content\">\n      This is a card\n    </div>\n  </li>\n</ul>\n
\n

You can also add an image to the card using the @image parameter:

\n
<ul class=\"list-unstyled layout\">\n  <li class=\"card card--image lg:col-2\">\n    <img class=\"card__image\" src=\"/images/ember-logo.png\" alt=\"\" role=\"presentation\">\n    <div class=\"card__content\">\n      This is a card\n    </div>\n  </li>\n</ul>\n
\n

Here is a fuller example of a card that has more structure in the card body

\n
<ul class=\"list-unstyled layout\">\n  <li class=\"card card--image lg:col-2\">\n    <img class=\"card__image\" src=\"/images/ember-logo.png\" alt=\"\" role=\"presentation\">\n    <div class=\"card__content\">\n      <h3>Ember.js</h3>\n      <p>A framework for ambitious web developers. Try it out!</p>\n      <div class=\"flex-horizontal-between\">\n        <div><a href=\"#\">Visit Website</a></div>\n        <div class=\"text-sm text-muted\">COPYRIGHT 2019 TILDE INC.</div>\n      </div>\n    </div>\n  </li>\n</ul>\n
","content":"# Card\n\nA card component that serves as a content container for images, text and links. When used within grid layouts cards are expected to share the same content structure and matching height. For accessibility reasons cards should always be implemented as lists, and for this reason the `` component's root element is a `
  • ` so it should always be wrapped in a `