Skip to content

Site Header Simple

In contrast to the main Site Header, this one has no extensive navigation or search form. It's just a logo with an optional link usually used for email or phone.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. Specifications
    1. Properties
    2. Styling
  5. Changelog
  6. Examples

Anatomy

  1. Logo
  2. Phone Number

Usage Guidelines

This component is used for displaying the navigation of LP sites. This can include the dialog component.

Accessibility

It is important that all text and link colors have enough contrast ratio compare to the background color.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
logointeger WordPress image IDYes-
linkstring Simple inline markup that usually contains an anchor.No-
link_descstring Text that goes just before linkNo-

Styling

Changelog

1.26.0 (2021-10-22)

  • fix: remove color: inherit from link (0e998d6)

1.21.1 (2021-06-16)

  • fix: remove text-decoration override for link (#116) (3d39872)

1.10.0

  • site-header-simple added

Examples

Default

example@email.address
{{ include( 'components/site-header-simple.twig', {
	logo: "badge-placeholder.svg"
	link: "<a href='#'>example@email.address</a>"
} ) }}

Phone Example

Call Us (555) 555-5555
{{ include( 'components/site-header-simple.twig', {
	logo: "badge-placeholder.svg"
	link_desc: "Call Us"
	link: "<a href='#'>(555) 555-5555</a>"
} ) }}