Hero Element

Provides a full-width responsive container for a hero image, tagline, and feature articles

PortfoLitO

AboutComponentsNPMGitHub

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

Usage

The <content-hero /> element does not provide any content of its own. Instead, it wraps the leading content of a page in a full-width responsive container, and sets a gradient background for emphasis.

It is intended to be used in the hero slot of the <page-main /> element.

Showcase your Portfolio of Work

A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages

<content-hero>
  <img src="/logo.svg" alt="PortfoLitO" slot="image" />
  <h3>Showcase your Portfolio of Work</h3>
  <h4>A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages</h4>
</content-hero>

Background Gradient

The gradient background can be customised by overriding the CSS background property of the container part.

Showcase your Portfolio of Work

A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages

<style>
  content-hero::part(container) {
    background: radial-gradient(circle closest-corner at 30% 50%, #3150fa 10%, light-dark(#f6f6f7, #202127) 100%);
  }
</style>
<content-hero>
  <img src="/logo.svg" alt="PortfoLitO" slot="image" />
  <h3>Showcase your Portfolio of Work</h3>
  <h4>A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages</h4>
</content-hero>

With Feature Articles

Feature article content can be added to the <content-carousel /> included in the hero element using the feature slot. This works best when using the panel variant of the <content-article /> element.

Showcase your Portfolio of Work

A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages

Feature A

Ut montes patrioque percipit adipisci fastidii pretium.

Feature B

Gubergren dapibus est elitr consetetur euismod ceteros mnesarchum.

Feature C

Nec laudem his vituperatoribus sea odio blandit natum possit pulvinar.

<content-hero>
  <img src="/logo.svg" alt="PortfoLitO" slot="image"/>
  <h3>Showcase your Portfolio of Work</h3>
  <h4>A small library of Lit-based Web Components for Software Developers to build simple Portfolio of Work Pages</h4>
  <content-article slot="feature" variant="panel">
    <h4>Feature A</h4>
    <p>Ut montes patrioque percipit adipisci fastidii pretium.</p>
  </content-article>
  <content-article slot="feature" variant="panel">
    <h4>Feature B</h4>
    <p>Gubergren dapibus est elitr consetetur euismod ceteros mnesarchum.</p>
  </content-article>
  <content-article slot="feature" variant="panel">
    <h4>Feature C</h4>
    <p>Nec laudem his vituperatoribus sea odio blandit natum possit pulvinar.</p>
  </content-article>
</content-hero>

CSS Parts

Name	Description
container	Overall responsive container section element
content	Text and tagline content of the hero element
feature	Carousel element container for the feature articles of the hero element

CSS Variables

Name	Description	Type	Default
--container-borderColor	Bottom border color of hero section	color	000000
--container-textColor	Foreground text color of tagline text	color	F4F4F4
--container-bgColor	Primary background color, used as fallback to gradient	color	020024
--gradient-fromColor	Primary color used in background gradient	color	020024
--gradient-midColor	Secondary color used in background gradient	color	646CFF
--gradient-toColor	Final color used in background gradient	color	00D4FF

Slots

Name	Description	Type
none	Text to show alongside hero image and feature content	p
title	Hidden title of the hero section	<h3>
image	Image or other content to show in the hero section	<img> *
feature	Articles to feature alongside hero image and tagline	*