Badge Element

Provides a stylised badge element

PortfoLitO

AboutComponentsNPMGitHub

Focus on Your Content

HTML

CSS

JS

Native web components allow you to create an elegant showcase for your portfolio of work using HTML

Overview

Installation and Usage

LitHTMLCSS

Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.

Usage

The <content-badge /> element styles text content as a badge, or tile, setting the background color, text color, and border radius of the text. The background and text color can be set via the color attribute.

DefaultBlueGreenRedOrangeYellowCyanTealPurplePinkGrey

<content-badge>Default</content-badge>
<content-badge color="blue">Blue</content-badge>
<content-badge color="green">Green</content-badge>
<content-badge color="red">Red</content-badge>
<content-badge color="orange">Orange</content-badge>
<content-badge color="yellow">Yellow</content-badge>
<content-badge color="cyan">Cyan</content-badge>
<content-badge color="teal">Teal</content-badge>
<content-badge color="purple">Purple</content-badge>
<content-badge color="pink">Pink</content-badge>
<content-badge color="grey">Grey</content-badge>

With Thumbnails

Thumbnail images can be added to badges using the thumb slot.

DiscordFacebookYouTube

<content-badge>
  <span slot="thumb" class="vpi-social-discord"></span>
  <span>Discord</span>
</content-badge>
<content-badge color="blue">
  <span slot="thumb" class="vpi-social-facebook"></span>
  <span>Facebook</span>
</content-badge>
<content-badge color="red">
  <span slot="thumb" class="vpi-social-youtube"></span>
  <span>YouTube</span>
</content-badge>

Outline Variant

Badges can also be given a stamp-like appearance by setting the variant attribute to outline. This makes the background of the badge transparent. In place of the background, an outline is added.

DefaultBlueGreenRedOrangeYellowCyanTealPurplePinkGrey

<content-badge variant="outline">Default</content-badge>
<content-badge variant="outline" color="blue">Blue</content-badge>
<content-badge variant="outline" color="green">Green</content-badge>
<content-badge variant="outline" color="red">Red</content-badge>
<content-badge variant="outline" color="orange">Orange</content-badge>
<content-badge variant="outline" color="yellow">Yellow</content-badge>
<content-badge variant="outline" color="cyan">Cyan</content-badge>
<content-badge variant="outline" color="teal">Teal</content-badge>
<content-badge variant="outline" color="purple">Purple</content-badge>
<content-badge variant="outline" color="pink">Pink</content-badge>
<content-badge variant="outline" color="grey">Grey</content-badge>

Attributes

Name	Description	Type
variant	Which style to use for the badge	String
color	Which color to use for the badge	String

CSS Parts

Name	Description
container	Responsive container element

CSS Variables

Name	Description	Type	Default
--content-textColor	Text color of badge contents	color	1D1D1D FFFFFF
--content-bgColor	Background color of badge	color	EDF2F7 E2E8F029

Slots

Name	Description	Type
none	Text content of the badge element	*