Pallote CSS

Elements

The component is composed of multiple elements. Check out the corresponding pages for more information on each child component. Children can be used in whichever order.

card the wrapper
- card__media the wrapper of an optional image element
  - card__mediaInner the image
- card__header the header element
  - card__label optional caption element, usually for category placeholder (text style is automated)
  - card__title the title (text style is automated)
  - card__subtitle optional subtitle (text style is automated)
- card__content some content (cards can have multiple instances of that element)
- card__actions optional ctas

<div class="card">
  <div class="card__media">
    <div class="card__mediaInner"></div>
  </div>  
  <div class="card__header">
    <p class="card__label">Card label</p>
    <p class="card__title">Card title</p>
    <p class="card__subtitle">Card subtitle</p>
  </div>
  <div class="card__content">
    <p>Sustainability is a social goal for people to co-exist on Earth over a long time. Specific definitions of this term are disputed and have varied with literature, context, and time.</p>
  </div>
  <div class="card__actions">
    <div class="buttons">
      <button type="button" class="button button--grey">Back</button>
      <button type="button" class="button button--error">Cancel</button>
    </div>
    <button type="button" class="button">Save</button>
  </div>
</div>

Sustainability is a social goal for people to co-exist on Earth over a long time. Specific definitions of this term are disputed and have varied with literature, context, and time.

Size

Override the default size of the component.


  class="card card--xs"


  class="card card--sm"


  class="card"
  Default


  class="card card--lg"


  class="card card--xl"

Color

You can use the color utility classes to change the background or border color and text color of the component and content. If you do not add any class, the default is fill--paper. Here are some examples.


  class="card"
  Default


  class="card fill--primary"


  class="card fill--warning"


  class="card fill--default stroke--primary"

Direction

Change the direction of the component.


  class="card"
  Default


  class="card card--landscape"

Alignement

Change the text alignement of the component.


  class="card"
  Default


  class="card card--center"


  class="card card--right"

Transparent

Remove padding around the card (not between card children) and background colour.


  class="card card--transparent"

Has shadow

Add a box-shadow to the element


  class="card card--hasShadow"

Card