Badge-stack

Jump To:

Stacks badges

Demos

Basic Badge Stack

Overlapping text-based badges.

<ul class="badge-stack">
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>JD</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>MS</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>AJ</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>+3</span></span>
    </span>
  </li>
</ul>

Clickable Image Stack

A stack of clickable user profiles with images.

<ul class="badge-stack">
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/64/100/100" alt="User 1">
      </div>
    </a>
  </li>
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/65/100/100" alt="User 2">
      </div>
    </a>
  </li>
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/66/100/100" alt="User 3">
      </div>
    </a>
  </li>
</ul>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "width": 10rem,
  "overlap": -5px,
  "border-width": 3px,
  "border-color" : "accent"
);

File Information

File: _badge-stack.scss
Group: badge-stack
Type: variable
Lines (comments): 12-16
Lines (code): 18-23

Map Properties

Name	Type	Default	Description
width	Dimension	10rem	Width of the badge stack
overlap	Dimension	-5px	Right margin for stacked items
border-width	Dimension	3px	Border width for stacked items

Mixins

set()

Mixin

Change modules $config

File Information

File: _badge-stack.scss
Group: badge-stack
Type: mixin
Lines (comments): 25-28
Lines (code): 30-32

Examples

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

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _badge-stack.scss
Group: badge-stack
Type: mixin
Lines (comments): 43-46
Lines (code): 48-84

Demo

View

Examples

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

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _badge-stack.scss
Group: badge-stack
Type: function
Lines (comments): 34-37
Lines (code): 39-41

Examples

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

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config