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.

Attribute	Type	Default	Description
stacked	Bool	unset	When 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>