Languages Element

Provides a bar graph overview of programming languages with percentage for developer project listings

Usage

Basic Usage

JavaScript

HTML

CSS

<content-languages>
  <li title="JS" value="60">JavaScript</li>
  <li title="HTML" value="20">HTML</li>
  <li title="CSS" value="20">CSS</li>
</content-languages>

CSS Parts

Name	Description
container	Responsive container element
heading	Languages heading and icon container
list	Wrapper for language names and color bubbles
line	Wrapper for language percentage line graph

CSS Variables

Name	Description	Type	Default
--heading-textColor	Color of the languages heading and icon	color	1A194F
--container-textColor	Foreground color of text inside the languages element container	color	000000
--container-bgColor	Background color of the languages element container	color	F6F6F6
--languageColor-js	JavaScript line and bubble color	color	FFD700
--languageColor-ts	TypeScript line and bubble color	color	4169E1
--languageColor-html	HTML line and bubble color	color	FF4500
--languageColor-css	CSS line and bubble color	color	663399

Slots

Name	Description	Type
none	Language names and percent of overall code in project	<li>