Elements

Indicators

Single State Indicators

Ribbons

NewBetaSalvageAs Is
<div className="ribbon-container">
  <BadgeRibbons
    color="badge-secondary-light"
    text="New"
  />
  <BadgeRibbons
    color="badge-secondary-light"
    text="Beta"
  />
  <BadgeRibbons
    color="badge-danger-light"
    text="Salvage"
  />
  <BadgeRibbons
    color="badge-danger-light"
    text="As Is"
  />
</div>
<div class="ribbon-container"><span class="ribbon badge-secondary-light">New</span><span class="ribbon badge-secondary-light">Beta</span><span class="ribbon badge-danger-light">Salvage</span><span class="ribbon badge-danger-light">As Is</span></div>

Corner Ribbons

New
Updated
<div>
  <BadgeCornerRibbons
    color="badge-secondary-light"
    text="New"
  />
  <BadgeCornerRibbons
    color="badge-gold"
    text="Updated"
  />
</div>
<div><div><div class="product"><div class="ribbon-wrapper"><div class="ribbon-corner badge-secondary-light">New</div></div></div></div><div><div class="product"><div class="ribbon-wrapper"><div class="ribbon-corner badge-gold">Updated</div></div></div></div></div>

Documentation: Ribbons and Corner Ribbons

JavaScript

Pass these modifiers as props.

OptionType
colorstring
textstring

Pills

hmrsdcr6.9ws
<div>
  <BadgePills
    color="badge-secondary"
    id="1"
    name="hmr"
    pillcontent=""
    tooltip="your badge one content"
  />
  <BadgePills
    color="badge-secondary"
    id="2"
    name="sd"
    pillcontent=""
    tooltip="your badge two content"
  />
  <BadgePills
    color="badge-secondary"
    id="4"
    name="cr"
    pillcontent="6.9"
    tooltip="your badge three content"
  />
  <BadgePills
    color="badge-secondary"
    id="5"
    name="ws"
    pillcontent=""
    tooltip="your badge four content"
  />
</div>
<div><span><span class="badge pill badge-secondary" id="Tooltip-1">hmr<span></span></span></span><span><span class="badge pill badge-secondary" id="Tooltip-2">sd<span></span></span></span><span><span class="badge pill badge-secondary" id="Tooltip-4">cr<span class="pill-content">6.9</span></span></span><span><span class="badge pill badge-secondary" id="Tooltip-5">ws<span></span></span></span></div>

Documentation: Pills

JavaScript

Pass these modifiers as props.

OptionType
colorstring
tooltipstring
namestring
idstring

Two State Indicators

Auction Lights

<div>
  <div className="sample-container">
    <BadgeAuctionLights
      className="oval badge-danger"
      id="TooltipAsIs"
      tooltip="As Is"
    />
    <BadgeAuctionLights
      className="oval badge-gold"
      id="TooltipCaution"
      tooltip="Caution"
    />
    <BadgeAuctionLights
      className="oval badge-success"
      id="TooltipGuarantee"
      tooltip="Guarantee"
    />
    <BadgeAuctionLights
      className="rectangle badge-cerelean"
      id="TooltipAbsent"
      tooltip="Title Absent"
    />
  </div>
  <div className="sample-container">
    <BadgeAuctionLights
      className="oval badge-smoke"
      id="TooltipAsIs2"
      tooltip="As Is"
    />
    <BadgeAuctionLights
      className="oval badge-gold"
      id="TooltipCaution2"
      tooltip="Caution"
    />
    <BadgeAuctionLights
      className="oval badge-smoke"
      id="TooltipGuarantee2"
      tooltip="Guarantee"
    />
    <BadgeAuctionLights
      className="rectangle badge-smoke"
      id="TooltipAbsent2"
      tooltip="Title Absent"
    />
  </div>
</div>
<div><div class="sample-container"><span><div class="oval badge-danger" id="TooltipAsIs" tooltip="As Is"></div></span><span><div class="oval badge-gold" id="TooltipCaution" tooltip="Caution"></div></span><span><div class="oval badge-success" id="TooltipGuarantee" tooltip="Guarantee"></div></span><span><div class="rectangle badge-cerelean" id="TooltipAbsent" tooltip="Title Absent"></div></span></div><div class="sample-container"><span><div class="oval badge-smoke" id="TooltipAsIs2" tooltip="As Is"></div></span><span><div class="oval badge-gold" id="TooltipCaution2" tooltip="Caution"></div></span><span><div class="oval badge-smoke" id="TooltipGuarantee2" tooltip="Guarantee"></div></span><span><div class="rectangle badge-smoke" id="TooltipAbsent2" tooltip="Title Absent"></div></span></div></div>

Documentation: Auction Lights

JavaScript

Pass these modifiers as props.

OptionType
classNamestring
tooltipstring
idstring