Skip to content

Section Header

This component can be used to provide a summary at the beginning of a section.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. Specifications
    1. Properties
  5. Changelog
  6. Related
    1. Contains
  7. Examples

Anatomy

  1. Heading
  2. Label (optional)
  3. Call to Action (optional)

Usage Guidelines

This component can be used to provide a summary at the beginning of a section. It fits use cases such as listing search results or other snippets of content, where you might also want a link to view a full related area of a site. If no label or CTA is needed, it is probably better just to use a plain HTML heading element.

Accessibility

Make sure the heading level is correct so that it properly fits into the page outline.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
headingstring Main heading textYes-
h_levelinteger Makes sure the title is the correct heading level for the page outlineNo2
labelstring Small description next to headingNo-
label_idstring Can be used to dynamically update label text easily with JS, primarily for countersNo-
link_textstring Call to action text. If empty link will not show upNo-
urlstring URL for optional call to actionNo-
classstring list of additional classes to apply to main element.No-

Changelog

1.5.0 (2020-06-23)

  • fix: correct styling for mobile (a50c8ce)

1.2.0

  • section-header added

Contains

Other core components embedded within this template.

Examples

Default

Example Heading

20 results

Search Google 
{{ include( 'components/section-header.twig', {
	heading: "Example Heading"
	label: "20 results"
	label_id: "example-section-counter"
	link_text: "Search Google"
	url: "https://google.com/"
} ) }}

No Label

Example Heading

Search Google 
{{ include( 'components/section-header.twig', {
	heading: "Example Heading"
	link_text: "Search Google"
	url: "https://google.com/"
} ) }}

No Call to Action

Example Heading

Section 2

{{ include( 'components/section-header.twig', {
	heading: "Example Heading"
	label: "Section 2"
} ) }}