← Back to documentation

Footer

A simple customizable footer that can be used at the bottom of the page.

Information

Plan: Personal

Properties

PropertyTypeDefault
Title
string
"Lorem ipsum"
Description
string
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis nisl a velit ultricies luctus."
Title & Links
{
  "items": {
    "props": {
      "items": {
        "items": {
          "props": {
            "href": {
              "type": "string"
            },
            "label": {
              "type": "string"
            }
          },
          "type": "object"
        },
        "type": "array"
      },
      "label": {
        "type": "string"
      }
    },
    "type": "object"
  },
  "type": "array"
}
[
  {
    "items": [
      {
        "href": "/",
        "items": [],
        "label": "Maecenas sagittis"
      },
      {
        "href": "/",
        "items": [],
        "label": "Morbi ac orci"
      },
      {
        "href": "/",
        "items": [],
        "label": "Cras ac dolor"
      }
    ],
    "label": "Lorem ipsum"
  },
  {
    "items": [
      {
        "href": "/",
        "items": [],
        "label": "Aenean consectetur"
      },
      {
        "href": "/",
        "items": [],
        "label": "Vestibulum aliquet"
      },
      {
        "href": "/",
        "items": [],
        "label": "Donec eget"
      }
    ],
    "label": "Suspendisse id"
  },
  {
    "items": [
      {
        "href": "/",
        "items": [],
        "label": "Cras tortor enim"
      },
      {
        "href": "/",
        "items": [],
        "label": "Fusce aliquam"
      },
      {
        "href": "/",
        "items": [],
        "label": "Integer interdum"
      }
    ],
    "label": "Vestibulum mattis"
  }
]
Text - Bottom - Left
string
"Lorem ipsum dolor sit amet"
Text - Bottom - Right
string
"Maecenas sagittis nisl a velit"
Background color
string
"var(--pc-semantic-surface-base-secondary)"
Color
string
"var(--pc-semantic-text-tertiary)"
Color - Hover
string
"var(--pc-semantic-interactive-link-hover)"
Color - Title
string
"var(--pc-semantic-text-muted)"
Color - Brand text
string
"var(--pc-semantic-text-muted)"
Color - Bottom
string
"var(--pc-semantic-text-muted)"
Border color - Bottom
string
"var(--pc-semantic-border-tertiary)"
Selectors
array
[]