Appearance
Article Element
Provides responsive layout and styling to the native HTML article element
Usage
Basic 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.
html
<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.
html
<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.
html
<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.
html
<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 |
|
--header-stickyTop-sm | Sticky header top position for small containers | length |
|
--header-textColor | Foreground color of the article header | color |
|
--header-bgColor | Background color of the article header | color |
|
--header-bgColor-lg | Background color of the article header for large containers | color |
|
--header-bgColor-sm | Background color of the article header for small containers | color |
|
--header-borderColor | Bottom border (underline) color of the article header | color |
|
--content-textColor | Foreground color of the article content | color |
|
--content-bgColor | Background color of the article content | color | - |
--content-bgColor-lg | Background color of the article content for large containers | color |
|
--content-bgColor-sm | Background color of the article content for small containers | color |
|
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>|* |