Redbooth

Cards

CardsCards - Basic

This element is the main material design-like container

.card--centered - If you want the card to be horizontally centered
.card--wide - A wider version of the card
.card--with-header - For those cards that have a header and a body

This is an example of a card

This is how you add text inside a card

This is a subtitle

This is another description

.card--centered

This is an example of a card

This is how you add text inside a card

This is a subtitle

This is another description

.card--wide

This is an example of a card

This is how you add text inside a card

This is a subtitle

This is another description

.card--with-header

This is an example of a card

This is how you add text inside a card

This is a subtitle

This is another description

<div style="background: #eee;padding: 20px;">
  <div class="card [modifier class]">
    <div class="card__title">This is an example of a card</div>
    <div class="card__description">This is how you add text inside a card</div>
    <div class="card__block">
      <div class="card__subtitle">This is a subtitle</div>
      <div class="card__description">This is another description</div>
    </div>
    <div class="card__block">
      <form>
        <div class="card__subtitle">This is a text</div>
        <div class="form-unit">
          <input type="text" />
        </div>
        <div class="form-unit">
          <button class="button button--primary-thin">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>