Logo Element

Provides a responsive container for a logo image and top level page headings

Usage

Basic Logo

The <page-logo> element itself does not provide any content of its own. Instead, it acts as a responsive container for your supplied logo image and headings.

<page-logo>
  <img src="/logo.svg" alt="PortfoLitO" />
</page-logo>

With Headings

It also supports slotting first and second level native heading elements via the headings named slot, which will be positioned to the right of the logo image.

When only one first-level heading element is specified, it will be centered to the logo image.

PortfoLitO

<page-logo>
  <img src="/logo.svg" alt="PortfoLitO" />
  <h1 slot="headings">PortfoLitO</h1>
</page-logo>

When both a first-level heading element and second-level heading element are specified, they will be stacked.

PortfoLitO

Showcase your Portfolio of Work

<page-logo>
  <img src="/logo.svg" alt="PortfoLitO" />
  <h1 slot="headings">PortfoLitO</h1>
  <h2 slot="headings">Showcase your Portfolio of Work</h2>
</page-logo>

CSS Variables

Name	Description	Type	Default
--logo-bgColor	Background color of the logo image	color	inherit
--logo-fgColor	Foreground color of logo image to blend with background and border colors	color	transparent
--logo-borderColor	Border color of logo image, if any	color	transparent

Slots

Name	Description	Type
none	Image to use as the logo in a page header	<img>
headings	Page headings to place next to the logo image	<h1> | <h2>