Skip to main content

Cards

Installation​

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN​

<script src="https://unpkg.com/@pearson-ux/card"></script>

NPM​

npm i @pearson-ux/card --save

Demo​

Single Card
<pearson-card>
    <div>Single Card</div>
</pearson-card>

Structure​

The card layout can adjust automatically by using our grid system in CSS. All you need to do is wrap the cards in a <div class="gr-grid-container"> container.

Row Layout​

Card One
Card Two
Card Three
Card Four
<div class="gr-grid-container ie-flex">
    <pearson-card>
        <div>Card One</div>
    </pearson-card>
    <pearson-card>
        <div>Card Two</div>
    </pearson-card>
    <pearson-card>
        <div>Card Three</div>
    </pearson-card>
    <pearson-card>
        <div>Card Four</div>
    </pearson-card>
</div>

Column Layout​

To change the view inside the grid to a stacked view, add the attribute stacked to the <pearson-card>.

Card One
Card Two
Card Three
Card Four
<pearson-card stacked>

Toggle Layout​

You can easily switch between a row view, and a column view by toggling the attribute stacked in the component, while wrapped in the .gr-grid-container class.

Card One
Card Two
Card Three
Card Four
const button = document.querySelector('#toggleTrigger'),
  cards = document.querySelectorAll('#toggleCard pearson-card');

if (cards.length > 0) {
  button.innerHTML = "List View"
  button.addEventListener('click', event => {
    cards.forEach(card => {
      if (card.hasAttribute('stacked')) {
        card.removeAttribute('stacked')
        button.innerHTML = "List View";
      } else {
        card.setAttribute('stacked', true)
        button.innerHTML = "Row View";
      }
    })
  })
}

API​

All attributes in this API are optional.

AttributeTypeDefaultDescription
stackedBoolunsetWhen multiple cards are displayed, this changes the layout from a row view to a stacked column view.

Events​

This is a display wrapper only and has no events associated with it.

HTML Markup​

Do you want to customize your card? You can use the markup provided below as a starting point, and style the card however you like..

Here are some basic practices to make sure the cards you build are accessible.
<div class="card-container">
    <div class="card">
        Content goes here...
    </div>
</div>