Topics Element

Provides a scrollable or wrapping list of topics related to a specific article

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-topics /> element is designed to provide an overview of technologies and skills used in a given project or role.

Big Tech Companies

AWS

GitHub

Microsoft

<content-topics>
  <div>AWS</div>
  <div>GitHub</div>
  <div>Microsoft</div>
</content-topics>

With Custom Title

It includes a title slot for overriding the default topics title with wording of your choice.

Big Tech Companies

Some Examples:

AWS

GitHub

Microsoft

<content-topics>
  <span slot="title">Some Examples:</span>
  <div>AWS</div>
  <div>GitHub</div>
  <div>Microsoft</div>
</content-topics>

List Variant

Topics can also be specified as list items by setting the variant attribute to list, which will style the topics into a rounded bar. When using this variant, excepting the title element, all children are expected to be <li /> elements.

Some Content

AWS

GitHub

Microsoft

<content-topics variant="list">
  <li>AWS</li>
  <li>GitHub</li>
  <li>Microsoft</li>
</content-topics>

Tile Variant

Topics can also be specified as badges by setting the variant attribute to tile, which will style the topics as tiled badges. When using this variant, excepting the title element, all children are expected to be <content-badge /> elements.

Some Content

AWSGitHubMicrosoft

<content-topics variant="tile">
  <content-badge>AWS</content-badge>
  <content-badge>GitHub</content-badge>
  <content-badge>Microsoft</content-badge>
</content-topics>

Attributes

Name	Description	Type
variant	Which layout to use for the topics contents	String

CSS Parts

Name	Description
container	Responsive container element
title	Leading heading title element
content	Wrapper element for topics contents

CSS Variables

Name	Description	Type	Default
--container-textColor	Text color of title and list items	color	1D1D1D
--container-borderColor	Border color of title and list items	color	--container-textColor
--container-bgColor	Background color of title and list items	color	FAFAFA
--title-textColor	Text color of the title heading element	color	--container-bgColor
--title-bgColor	Background color of the title heading element	color	--container-textColor
--list-textColor	Text color of the topic list items	color	--container-textColor
--list-borderColor	Background color of the topic list items	color	--container-borderColor

Slots

Name	Description	Type	Default
none	List of topics related to the article	<li> <content-badge> *	-
title	Leading text to use in list title	<span>	Topics