Overview of Components
Components are broken down into two categories:
- Page components, which provide overall structure to a page
- Content components, which encapsulate and style content within a page
Using PortfoLitO, the following example has been constructed directly in this page, as a live demonstration of page and content components in action.
TIP
Open the console and inspect the demo to see the page and content component structure
PortfoLitO
Showcase your Portfolio of Work
A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Page Components
Similar to their native HTML equivalents, these components provide structure and navigation to a page. They are intended to only be used once per document.
Header
PortfoLitO
Logo
PortfoLitO
Nav
<page-nav />
Provides a responsive page navigation menu which handles positioning and social links
PortfoLitO
Main
PortfoLitO
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Footer
PortfoLitO
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Content Components
These components encapsulate and style the actual content of the page, and can be used as many times as needed.
Hero
<content-hero />
Provides a full-width responsive container for a hero image, tagline, and feature articles
PortfoLitO
Showcase your Portfolio of Work
A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Section
<content-section />
Provides responsive layout and styling to the native HTML section element
PortfoLitO
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Article
<content-article />
Provides responsive layout and styling to the native HTML article element
PortfoLitO
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Details
<content-details />
Provides a replacement to the native details element, which does not trigger animations on expansion
PortfoLitO
About
Getting Started
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit.
Interesset inciderint enim eam sale maluisset.
Carousel
PortfoLitO
About
Tamquam vitae curae dico dictas. Antiopam tempor hendrerit delicata maecenas repudiandae tractatos eripuit.
Tip
Open the console and inspect the demo to see the page and content component structures
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Badge
PortfoLitO
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Languages
<content-languages />
Provides a bar graph overview of programming languages with percentage for developer project listings
PortfoLitO
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.
Topics
<content-topics />
Provides a scrollable or wrapping list of topics related to a specific article
PortfoLitO
Focus on Your Content
Native web components allow you to create an elegant showcase for your portfolio of work using HTML
Overview
Installation and Usage
Libero curae luptatum intellegat evertitur elit. Interesset inciderint enim eam sale maluisset. Graece regione urbanitas nominavi duis honestatis ancillae voluptatibus libero senectus.