Canvas Docs

Header Info

A small inline info/contact element (phone, email, hours, or text) with an optional icon and link for a built header. It is shown in the block inserter as Canvas Header Info and registered as canvas-core/header-info.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Header Info settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • DisplayDefaultSingle Info Line

    Whether the block shows one line of contact text, or a row of entries each with an icon, a small label and a value under it. The rest of the panel changes to match.

    ChoicesSingle Info LineHeader Extras List (icon + label + value)

  • IconDefaultuil uil-phone

    Optional font-icon class shown before the text (e.g. "uil uil-phone").

    Shown when Display is "Single Info Line"

  • TextDefault+1 (555) 000-0000

    The visible info text (phone, email, hours, etc.). Supports a small safe set of inline HTML tags for emphasis: , , , , (class attribute only) and , e.g. a promo bar like 'Alert: Get 40% off.'. Any other tag/attribute is stripped. Avoid combining an inline here with the Link field below (would nest anchors).

    Shown when Display is "Single Info Line"

  • Extras ItemsDefaultEmpty

    The entries in the extras list, in the order given here. Each one is an icon beside a small label with a value under it, such as an opening time or a phone number.

    Shown when Display is "Header Extras List (icon + label + value)"

    Each row of Extras Items takes:

    • IconDefaultbi-telephone

      Icon shown beside this entry.

    • Label (top line)DefaultEmpty

      Small line above the value, naming what the entry is.

    • Value (bottom line)DefaultEmpty

      The detail itself, such as the number, the address or the hours.

    • LinkDefaultEmpty

      Makes this entry clickable. Accepts a web address, or tel: and mailto: so a phone number dials and an address opens a mail app.

    • Text Block CSS ClassesDefaultEmpty

      Classes on this row’s text block.

    • Link CSS ClassesDefaultEmpty

      Classes on this row’s link.

    • Link WrapsDefaultThe whole text block

      How much of the entry is clickable: both lines together, or the value on its own so the label stays plain text.

      ChoicesThe whole text blockThe value line only

    • Link TargetDefaultEmpty

      Browsing context the link opens in.

      ChoicesSame frame (empty)Top frame (_top)New tab (_blank)

Settings

  • LinkDefaultEmpty

    Optional. Supports tel:, mailto:, or http(s) URLs. Leave empty for plain text.

    Shown when Display is "Single Info Line"

  • Open in New TabDefaultOff

    Open the link in a new browser tab (http(s) links only).

    Shown when Display is "Single Info Line"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Header: App Menu, Header Button, Header Cart, Header Container, Header Icon Link, Header Logo.

Was this page helpful?