Cards

Star
The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

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

Simple card

Card as simple panel

<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

VARIABLE DEFAULT VALUE DESCRIPTION
$cards--syntax null syntax config for .card

Component variables

VARIABLE DEFAULT VALUE DESCRIPTION
$cards--font-size 1rem sets the font-size property
$cards--font-family 'Open Sans', verdana, sans-serif sets the font-family property
$cards--font-weight null sets the font-weight property
$cards--text-transform null sets the text-transform property
$cards--letter-spacing null sets the letter-spacing property
$cards--line-height null sets the line-height property
$cards--text-align null sets the text-align property
$cards--text-decoration null sets the text-decoration property
$cards--height null sets the height property
$cards--margin 0 0 2em sets the margin property
$cards--border-width 1px sets the border-width property
$cards--border-style solid sets the border-style property
$cards--border-color (
  'default': rgb(232, 232, 236),
  '-primary': rgb(31, 13, 51),
  '-success': rgb(55, 211, 189),
  '-warning': rgb(255, 176, 0),
  '-danger': rgb(253, 65, 100),
)
sets the border-color property
$cards--border-radius 0.2em sets the border-radius property
$cards--color null sets the color property
$cards--background-color rgb(255, 255, 255) sets the background-color property
$cards--box-shadow null sets the box-shadow property
$cards--background null sets the background property
Cover    
VARIABLE DEFAULT VALUE DESCRIPTION
$card-cover--height 9.375em sets the height property for .card__cover
Block    
VARIABLE DEFAULT VALUE DESCRIPTION
$card-block--padding 1em sets the padding property for .card__block
$card-block--text-align null sets the text-align property for .card__block
$card-block--flex-basis null sets the flex-basis property for .card__block
$card-block--flex-shrink null sets the flex-shrink property for .card__block
$card-block--flex-grow 1 sets the flex-grow property for .card__block
Heading    
VARIABLE DEFAULT VALUE DESCRIPTION
$card-heading--margin 0 0 1em sets the margin property for .card__heading
$card-heading--font-size null sets the font-size property for .card__heading
$card-heading--font-weight null sets the font-weight property for .card__heading
$card-heading--font-family null sets the font-family property for .card__heading
$card-heading--letter-spacing null sets the letter-spacing property for .card__heading
$card-heading--line-height null sets the line-height property for .card__heading
$card-heading--text-align null sets the text-align property for .card__heading
$card-heading--text-decoration null sets the text-decoration property for .card__heading
$card-heading--color (
  '-primary': rgb(31, 13, 51),
  '-success': rgb(55, 211, 189),
  '-warning': rgb(255, 176, 0),
  '-danger': rgb(253, 65, 100),
)
sets the color property for .card__heading
Paragraph    
VARIABLE DEFAULT VALUE DESCRIPTION
$card-paragraph--margin 0 0 1em sets the margin property for .card__paragraph
$card-paragraph--font-size null sets the font-size property for .card__paragraph
$card-paragraph--font-weight null sets the font-weight property for .card__paragraph
$card-paragraph--font-family null sets the font-family property for .card__paragraph
$card-paragraph--letter-spacing null sets the letter-spacing property for .card__paragraph
$card-paragraph--line-height null sets the line-height property for .card__paragraph
$card-paragraph--text-align null sets the text-align property for .card__paragraph
$card-paragraph--text-decoration null sets the text-decoration property for .card__paragraph
$card-paragraph--color null sets the color property for .card__paragraph