Cards

Download

You can fetch Trowel Cards with npm, yarn or bower.

# With bower
$ bower install --save trowel-cards

# With npm
$ npm install --save trowel-cards

# With yarn
$ yarn add trowel-cards

You can also download a zip archive right here.

Installation

SCSS

The main scss file to include to your main .scss file is located at the ./src/scss/cards.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Cards
@import './path/to/dependencies/trowel-cards/src/scss/cards';

Twig files

The twig template ready to be include or embed is located at ./src/twig/card.html.twig.

Usage

<div class="card">
  <div class="card__block">
    <h4 class="card__heading">Simple card</h4>
    <p class="card__paragraph">Card as simple panel</p>
  </div>
</div>

With a cover

You can add an image displaying as a cover with the wrapper .card__cover-wrapper and an <img> with the class .card__cover.

Simple card

Card as simple panel

<div class="card">
  <div class="card__cover-wrapper">
    <img class="card__cover" src="http://placehold.it/350x150">
  </div>

  <div class="card__block">
    <h4 class="card__heading">Simple card</h4>
    <p class="card__paragraph">Card as simple panel</p>
  </div>
</div>

Whole card clickable

With adding an <a> element with the class .card__href as the first child of .card, you can make the whole card clickable.

Simple card

Card as simple panel

<div class="card">
  <a class="card__href" href="#"></a>

  <div class="card__cover-wrapper">
    <img class="card__cover" src="http://placehold.it/350x150">
  </div>

  <div class="card__block">
    <h4 class="card__heading">Simple card</h4>
    <p class="card__paragraph">Card as simple panel</p>
  </div>
</div>

Themes

By default, you have access to 4 themes. You can with trowel variables, edit, add or remove themes.

Simple card

Card as simple panel

Simple card

Card as simple panel

Simple card

Card as simple panel

Simple card

Card as simple panel

<div class="card card--primary">
  ...
</div>

<div class="card card--success">
  ...
</div>

<div class="card card--warning">
  ...
</div>

<div class="card card--danger">
  ...
</div>

Twig usage

Instead of writing html, you can embed the twig template :

{% embed 'path/to/trowel-cards/src/twig/card.html.twig' %}
  {% block card_block_inner %}
    <h4 class="card__heading">Full card</h4>
    <p class="card__paragraph">Card with cover</p>
  {% endblock card_block_inner %}
{% endembed %}

In order to add a cover, set the cover property into the embed options

{% embed "path/to/trowel-cards/src/twig/card.html.twig" with {
  "cover": "http://placehold.it/350x150"
} %}
  {% block card_block_inner %}
    <h4 class="card__heading">Full card</h4>
    <p class="card__paragraph">Card with cover</p>
  {% endblock card_block_inner %}
{% endembed %}

If you want to add some modifiers on the block selector (.card), you can set the array modifiers with as many modifiers as you need :

{% embed "path/to/trowel-cards/src/twig/card.html.twig" with {
  "modifiers": ["primary"],
} %}
  {% block card_block_inner %}
    <h4 class="card__heading">Full card</h4>
    <p class="card__paragraph">Card with cover</p>
  {% endblock card_block_inner %}
{% endembed %}

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

Component variables