Page Footer

Global footer that contains Pega description, main navigation, secondary navigation and social media links

Published Last updated: 4.5.0 Change log Github NPM
Twig Usage 
// The main template
{% include '@bolt-components-page-footer/page-footer.twig' with {
  description: description, // Heading and description text goes here
  primary_nav: primary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
  secondary_nav: secondary_nav, // Use page-footer-nav-ul.twig to render each set of navigation list
} only %}

// Nav list template
{% include '@bolt-components-page-footer/page-footer-nav-ul.twig' with {
  headline: {
    content: 'Company',
    tag: 'h3',
  },
  content: content, // Use page-footer-nav-li.twig to render each link
  category: category, // Set the category for a particular list of navigation
} only %}

// Nav list item template
{% include '@bolt-components-page-footer/page-footer-nav-li.twig' with {
  link: {
    content: 'Facebook',
    icon_before: icon_facebook, // Only render an icon if page-footer-nav-ul.twig category is set to social
    attributes: {
      href: 'https://www.facebook.com/pegasystems',
    },
  },
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Page Footer (page-footer.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
description

Accept any types of value, plain text is the simplest usage.

 any —
  • —
primary_nav

Render the primary navigation. Use page-footer-nav-ul.twig to render each set of navigation list.

 any —
  • —
secondary_nav

Render the secondary navigation. Use page-footer-nav-ul.twig to render each set of navigation list.

 any —
  • —
Page Footer Nav ul (page-footer-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

Content of the nav list. Use page-footer-nav-li.twig to render each link.

 any —
  • —
category

Set the category for the nav list. Only needed for social links, language links, and legal links.

 string —
  • social, language, legal
headline

Headline of the nav list. This must be set for each nav list.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Set the headline for the nav list.

      • —
    • tag

      Set the semantic HTML tag for the headline.

      • h1, h2, h3, h4, h5, h6
Page Footer Nav li (page-footer-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
link

Link of the nav list item. Passing the "href" attribute will turn it into a semantic link and passing the "type" attribute will turn it into a semantic button.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

      • —
    • content

      Set the label text for the link.

      • —
    • icon_before

      Set an icon before a social link.

      • —
Install Install 
npm install @bolt/components-page-footer
Dependencies @bolt/core-v3.x @bolt/elements-icon