State

Display the state of the POI object.

On this page

Examples

open unknown closed

html

<span class="state state--open">open</span>
<span class="state state--unknown">unknown</span>
<span class="state state--closed">closed</span>

Icon without text

html

<div class="bg-light p-3">
  <span class="state state-simple state--open"><span class="visually-hidden">open</span></span>
  <span class="state state-simple state--unknown"><span class="visually-hidden">unknown</span></span>
  <span class="state state-simple state--closed"><span class="visually-hidden">closed</span></span>
</div>

CSS

Variables

src/scss/_card-molecules.scss

--#{$prefix}state-bg: #{$state-bg};
--#{$prefix}state-gap: #{$state-gap};
--#{$prefix}state-padding-x: #{$state-padding-x};
--#{$prefix}state-padding-y: #{$state-padding-y};
@include rfs($state-font-size, --#{$prefix}state-font-size);
--#{$prefix}state-font-weight: #{$state-font-weight};
--#{$prefix}state-color: #{$state-color};
--#{$prefix}state-border-radius: #{$state-border-radius};
--#{$prefix}state-icon: #{escape-svg($state-icon)};
--#{$prefix}state-icon-color: #{$state-icon-color};

Sass variables

src/scss/_variables.scss

$state-bg: #fff;
$state-gap: .5em;
$state-font-size: .75em;
$state-font-weight: 700;
$state-color: #000;
$state-padding-y: .35em;
$state-padding-x: .65em;
$state-border-radius: var(--#{$prefix}border-radius);
$state-statuses: (
  "open": #2ed05d,
  "unknown": #ebbe5b,
  "closed": #e55f60,
);
$state-icon-color: #fff;
$state-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='#fff' d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/></svg>");