Download

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

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

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

# With yarn
$ yarn add trowel-badges

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/badges.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 Badges
@import './path/to/dependencies/trowel-badges/src/scss/badges';

Usage

<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>

Themes

By default, you have access to 5 themes, but you can through trowel variable edit, delete or add themes.

<div class="badge">default</div>
<div class="badge badge--primary">primary</div>
<div class="badge badge--success">success</div>
<div class="badge badge--warning">warning</div>
<div class="badge badge--danger">danger</div>

Sass reference

Syntax variables

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

Component variables