Badge

Jump To:

Outputs badge component stylesheet

Demos

Basic Badge

A standard badge with text.

<div class="badge">
  <div class="badge__inner">
    <span>JS</span>
  </div>
</div>

Badge Sizes

Demonstrating small, default, and large badge variants.

<div style="display: flex; gap: 1rem; align-items: center;">
  <div class="badge badge--small">
    <div class="badge__inner">
      <span>SM</span>
    </div>
  </div>
  <div class="badge">
    <div class="badge__inner">
      <span>MD</span>
    </div>
  </div>
  <div class="badge badge--large">
    <div class="badge__inner">
      <span>LG</span>
    </div>
  </div>
</div>

Clickable Badge with Image

A badge containing an image that scales on hover.

<a href="#" class="badge">
  <div class="badge__inner">
    <img src="https://picsum.photos/id/64/300/300" alt="Profile Image">
  </div>
</a>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color":    rgb(205, 205, 205),
  "background-color-hover": null,
  "border-radius":       50%,
  "color":               black,
  "color-hover":         null,
  "box-shadow" :         null,
  "box-shadow-hover" :   null,
  "font-size":           1.5rem,
  "font-weight":         bold,
  "font-family":         true,
  "width":               7rem,
  "hover-scale":         1.2,
  "transition-duration" : 110ms,
  "sizes" : (
    "small" : (
      "font-size" : 1.2rem,
      "width" :  4rem
    ),
    "large" : (
      "font-size" : 2.75rem,
      "width" :  9rem
    )
  )
);

File Information

File: _badge.scss
Group: badge
Type: variable
Lines (comments): 21-36
Lines (code): 38-62

Map Properties

Name	Type	Default	Description
background-color	Color	gray	Background color (if no image)
background-color-hover	Color	null	Optional background color for hover when using badge--clickable modifier
border-radius	Number	50%	Border radius of badge
color	Color	black	Type color
color-hover	Color	null	Optional color for hover when using badge--clickable modifier
box-shadow	CssValue	null	Optional box-shadow
box-shadow-hover	CssValue	null	Optional box-shadow for hover when using badge--clickable modifier
font-size	Number	1.3rem	Font size (basic ie. 1.3rem) for badge
font-weight	Keyword	bold	Font weight
font-family	String	true	Specify font family, defaults to typography font-family-sans
width	Number	10rem	Width of badge (default size)
transition-duration	Time	110ms	Transition duration amount for transitioned properties
hover-scale	Number	1.2	Scale of badge (if clickable) on hover (enlarges badge)
sizes	List	Object	List of other sizes (large by default), each size is a map of (width, font-size)

Mixins

set()

Mixin

Change modules $config

File Information

File: _badge.scss
Group: badge
Type: mixin
Lines (comments): 64-67
Lines (code): 69-71

Examples

@include ulu.component-badge-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Output badge component styles

File Information

File: _badge.scss
Group: badge
Type: mixin
Lines (comments): 83-97
Lines (code): 99-169

Examples

@include ulu.component-badge-styles();

<div class="badge">
  <div class="badge__inner">
    <img src="..." alt="...">
  </div>
</div>

<div class="badge">
  <div class="badge__inner">
    <span>JS</span>
  </div>
</div>

Preview

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _badge.scss
Group: badge
Type: function
Lines (comments): 73-76
Lines (code): 78-81

Examples

@include ulu.component-badge-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config