User Manual

Card

A reusable component with repeatable content, title & actions.

Default

Card Title

This is a description

This is a description 

    
      

  

<article class="m-card ">

  
    <h2 class="m-card__title">Card Title</h2>
  

  
    <div class="m-card__content">
    	<p>This is a description</p>
    </div>
  
    <div class="m-card__content">
    	This is a description
    </div>
  

  
    <div class="m-card__action">
      

<button
  class="a-button m-card__action-button "
  
>
  <span class="a-button__text">Primary button</span>
</button>


    </div>
  

</article>

Disabled

Creates a grey-scale version of your card.

Don't forget to add a disabled attribute to your button as well.

Card Title

This is a description

This is a description 

    
      

  

<article class="m-card is-disabled">

  
    <h2 class="m-card__title">Card Title</h2>
  

  
    <div class="m-card__content">
    	<p>This is a description</p>
    </div>
  
    <div class="m-card__content">
    	This is a description
    </div>
  

  
    <div class="m-card__action">
      

<button class="a-button m-card__action-button" disabled>
  <span class="a-button__text">Primary button</span>
</button>


    </div>
  

</article>

States

  • is-disabled

    Creates a grey-scale version of your card