Article Element

Provides responsive layout and styling to the native HTML article element

PortfoLitO

AboutComponentsNPMGitHub

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

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-article /> element does not provide any content of its own. Instead, it wraps supplied content with a native <article /> element.

Yoda Quotes

Good relations with the Wookiees, I have.Not if anything to say about it, I have.Use your feelings, Obi-Wan, and find him you will.

<content-article>
  <h3>Yoda Quotes</h3>
  <q>Good relations with the Wookiees, I have.</q>
  <q>Not if anything to say about it, I have.</q>
  <q>Use your feelings, Obi-Wan, and find him you will.</q>
</content-article>

With Titles

It includes slots and styling for any article title, subtitle, and timestamp.

Yoda Quotes

In No Particular Order

Good relations with the Wookiees, I have.Not if anything to say about it, I have.Use your feelings, Obi-Wan, and find him you will.

<content-article>
  <h4 slot="title">Yoda Quotes</h4>
  <h5 slot="subtitle">In No Particular Order</h5>
  <q>Good relations with the Wookiees, I have.</q>
  <q>Not if anything to say about it, I have.</q>
  <q>Use your feelings, Obi-Wan, and find him you will.</q>
</content-article>

Panel Variant

Articles can also be styled as panels by setting the variant attribute to panel, which will style the article with rounded corners.

Additionally, it triggers automatic assignment of the --index CSS variable as a style to the element. This is calculated using the article's position amongst any sibling articles within its parent element. The value is used to delay entry animations in the <content-carousel /> and <content-details /> elements.

Feature A

Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et. Enim pulvinar senserit feugiat viris vim tale.

Feature B

Ferri repudiare sit potenti scripserit. Harum phasellus commune feugiat graecis sapien assueverit.

Feature C

His detracto error verear tale maximus rhoncus convallis. Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.

<content-article variant="panel">
  <h4>Feature A</h4>
  <p>
    Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et.
    Enim pulvinar senserit feugiat viris vim tale.
  </p>
</content-article>
<content-article variant="panel">
  <h4>Feature B</h4>
  <p>
    Ferri repudiare sit potenti scripserit.
    Harum phasellus commune feugiat graecis sapien assueverit.
  </p>
</content-article>
<content-article variant="panel">
  <h4>Feature C</h4>
  <p>
    His detracto error verear tale maximus rhoncus convallis.
    Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.
  </p>
</content-article>

Résumé Variant

Articles can also be stylised for displaying your job history by setting the variant attribute to job. As PortfoLitO is designed to showcase developer work experience, articles will look similar to how they would appear on a résumé document.

When using the job variant, the article's header part will stick to the top of its scroll container, meaning important details such as role, employer, and timeframe remain visible as the page is scrolled.

Additionally, in smaller containers (i.e. when the page is being viewed on a phone), articles will automatically be styled to appear as distinct "bubbles", which can be seen by resizing the container in the example below.

Senior Software Developer

Corporation C

2024 - Present

Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et. Enim pulvinar senserit feugiat viris vim tale. Oratio feugiat graeco mea vim fabulas definiebas varius discere. Idque platonem gubergren noster interesset.

Software Developer

Corporation B

2020 - 2024

Gubergren ius mutat inceptos habitant habemus reque. Consectetur vidisse ubique dolores natum iusto rhoncus assueverit cursus fusce. Perpetua pellentesque ornatus imperdiet lacus vitae facilis deserunt. Curae ligula ridens dolorem discere. Verterem in maluisset quod quaestio convallis. Wisi convallis melius laudem veniam montes. Mi diam his augue quaerendum legere. Liber vehicula moderatius veritus nunc.

Software Developer

Corporation A

2016 - 2019

His detracto error verear tale maximus rhoncus convallis. Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque. Fabulas parturient ne facilisis pertinax dicit unum mentitum tractatos equidem. Eget graeco fabulas mentitum elaboraret assueverit montes purus meliore. Definitionem nobis oporteat aptent suscipiantur sapientem curae curae prodesset tortor.

Junior Software Developer

Corporation A

2015 - 2016

His detracto error verear tale maximus rhoncus convallis. Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque. Fabulas parturient ne facilisis pertinax dicit unum mentitum tractatos equidem. Eget graeco fabulas mentitum elaboraret assueverit montes purus meliore. Definitionem nobis oporteat aptent suscipiantur sapientem curae curae prodesset tortor.

<content-article variant="job">
  <h4 slot="title">Senior Software Developer</h4>
  <h5 slot="subtitle">Corporation C</h5>
  <div slot="timestamp">2024 - Present</div>
  <p>
    Rhoncus perpetua atqui harum signiferumque mea reprimique prodesset et.
    Enim pulvinar senserit feugiat viris vim tale.
    Oratio feugiat graeco mea vim fabulas definiebas varius discere.
    Idque platonem gubergren noster interesset.
  </p>
</content-article>
<content-article variant="job">
  <h4 slot="title">Software Developer</h4>
  <h5 slot="subtitle">Corporation B</h5>
  <div slot="timestamp">2020 - 2024</div>
  <p>
    Gubergren ius mutat inceptos habitant habemus reque.
    Consectetur vidisse ubique dolores natum iusto rhoncus assueverit cursus fusce.
    Perpetua pellentesque ornatus imperdiet lacus vitae facilis deserunt.
    Curae ligula ridens dolorem discere. Verterem in maluisset quod quaestio convallis.
    Wisi convallis melius laudem veniam montes. Mi diam his augue quaerendum legere.
    Liber vehicula moderatius veritus nunc.
  </p>
</content-article>
<content-article variant="job">
  <h4 slot="title">Software Developer</h4>
  <h5 slot="subtitle">Corporation A</h5>
  <div slot="timestamp">2016 - 2019</div>
  <p>
    His detracto error verear tale maximus rhoncus convallis.
    Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.
    Fabulas parturient ne facilisis pertinax dicit unum mentitum tractatos equidem.
    Eget graeco fabulas mentitum elaboraret assueverit montes purus meliore.
    Definitionem nobis oporteat aptent suscipiantur sapientem curae curae prodesset tortor.
  </p>
</content-article>
<content-article variant="job">
  <h4 slot="title">Junior Software Developer</h4>
  <h5 slot="subtitle">Corporation A</h5>
  <div slot="timestamp">2015 - 2016</div>
  <p>
    His detracto error verear tale maximus rhoncus convallis.
    Ceteros pertinacia verterem moderatius porttitor adversarium nostrum omittam utroque.
    Fabulas parturient ne facilisis pertinax dicit unum mentitum tractatos equidem.
    Eget graeco fabulas mentitum elaboraret assueverit montes purus meliore.
    Definitionem nobis oporteat aptent suscipiantur sapientem curae curae prodesset tortor.
  </p>
</content-article>

Attributes

Name	Description	Type
variant	Which layout to use for the article container	String

CSS Parts

Name	Description
container	Overall responsive container element
header	Container element for title, subtitle, and timestamp slots
content	The actual content of the article

CSS Variables

Name	Description	Type	Default
--container-outlineColor	Outline color of the article container	color	-
--header-stickyTop	Sticky header top position	length	0px
--header-stickyTop-sm	Sticky header top position for small containers	length	--header-stickyTop
--header-textColor	Foreground color of the article header	color	inherit
--header-bgColor	Background color of the article header	color	D5D5D5
--header-bgColor-lg	Background color of the article header for large containers	color	--header-bgColor
--header-bgColor-sm	Background color of the article header for small containers	color	--header-bgColor
--header-borderColor	Bottom border (underline) color of the article header	color	000000
--content-textColor	Foreground color of the article content	color	inherit
--content-bgColor	Background color of the article content	color	-
--content-bgColor-lg	Background color of the article content for large containers	color	--content-bgColor
--content-bgColor-sm	Background color of the article content for small containers	color	--content-bgColor

Slots

Name	Description	Type
none	Contents of the article, not including thumbnail, titles, or tags	-
thumb	Thumbnail image of the article	<img>
title	Primary title of the article	<h4> *
subtitle	Secondary subtitle of the article	<h5> *
timestamp	Any date/time associated with the article	<div> *
tags	Any category or grouping details relevant to the article	<div> *