Go To Github

COMPONENT

c-badge

Demo Section

Each variation will be presented in the following sections.

Default badge

0

Error badge

1

Success badge

2

Notice badge

3

Alert badge

4

Long message badge

This is my very long success message ...

Technical Details

README

Bower versionGitter Chat

Article

Description

A simple badge component with different states (e.g. error, success, notice,…) and flexible content.

Installation

Installation with Veams

veams install vc badge

Installation with Bower

bower install veams-component-badge --save

Fields

Settings

  • settings.badgeContextClass {String} [default] - Just pass a string
  • settings.badgeClasses {String} - Modifier classes

Content

  • content.badgeType {String} - Define your badge type (i.e. alert, error, notice, success)
  • content.badgeContent {String} - Badge content
Data File
{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "default",
				"badgeContent": "0"
			}
		},
		"error": {
			"docs": {
				"variationName": "Error badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "error",
				"badgeContent": "1"
			}
		},
		"success": {
			"docs": {
				"variationName": "Success badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "success",
				"badgeContent": "2"
			}
		},
		"notice": {
			"docs": {
				"variationName": "Notice badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "notice",
				"badgeContent": "3"
			}
		},
		"alert": {
			"docs": {
				"variationName": "Alert badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "alert",
				"badgeContent": "4"
			}
		},
		"longMessage": {
			"docs": {
				"variationName": "Long message badge",
				"sectionCenter": true
			},
			"settings": {
				"badgeContextClass": false,
				"badgeClasses": false
			},
			"content": {
				"badgeType": "success",
				"badgeContent": "This is my very long success message ..."
			}
		}
	}
}
Templates

c-badge

{{#unless content.badgeType}}
	<h2 style="color: red">Please provide a badge type!</h2>
{{/unless}}

<div class="c-badge{{#if settings.badgeContextClass}}--{{settings.badgeContextClass}}{{else}}--default{{/if}}{{#if settings.badgeClasses}} {{settings.badgeClasses}}{{/if}}"
     data-css="c-badge">
	<span class="badge__content{{#if content.badgeType}} is-{{content.badgeType}}{{/if}}">
		{{content.badgeContent}}
	</span>
</div>
Styles
/* ===================================================
COMPONENT: BADGE
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$badge-color-alert: #fff6bf;
$badge-color-error: #fbe3e4;
$badge-color-notice: #e5edf8;
$badge-color-success: #e6efc2;

/* ---------------------------------------------------
Helper mixins
--------------------------------------------------- */
@mixin badge($color: #999, $font-size: 2.5rem) {
	background-color: $color;
	border-radius: $font-size * 5;
	color: darken($color, 60%);
	font-size: $font-size;
	line-height: 1;
	padding: 1.2rem 2.7rem;
}

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-badge"] {

	/*
	Standard styles
	----------------------- */
	display: inline-block;

	/*
	Content classes
	----------------------- */
	.badge__content {
		@include badge();
	}

	/*
	Modifiers
	----------------------- */
	.is-alert {
		@include badge($badge-color-alert);
	}

	.is-error {
		@include badge($badge-color-error);
	}

	.is-notice {
		@include badge($badge-color-notice);
	}

	.is-success {
		@include badge($badge-color-success);
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-badge--default {
}
HTML Output

Default badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-default">
		0
	</span>
</div>

Error badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-error">
		1
	</span>
</div>

Success badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-success">
		2
	</span>
</div>

Notice badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-notice">
		3
	</span>
</div>

Alert badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-alert">
		4
	</span>
</div>

Long message badge

<div class="c-badge--default" data-css="c-badge">
	<span class="badge__content is-success">
		This is my very long success message ...
	</span>
</div>