Canvas Docs

Header Social

A row of social / contact icon links for a built header, using the top-social markup and styling. It is shown in the block inserter as Canvas Header Social and registered as canvas-core/header-social.

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

The Header Social 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

  • Social LinksDefaulta preset list of 2 rows

    The social icons shown in the bar, in the order listed here. A row with neither a link nor an icon is left out.

    Each row of Social Links takes:

    • URLDefaultEmpty

      Profile address this icon opens.

    • IconDefaultEmpty

      Font-icon class, e.g. "fa-brands fa-facebook-f" or "fa-solid fa-envelope".

    • LabelDefaultEmpty

      Visible / screen-reader text shown on hover.

    • Extra ClassDefaultEmpty

      Optional extra class for brand colour styling (e.g. "h-bg-call").

    • List Item ClassDefaultEmpty

      Optional class on this row's list item rather than its link: where a responsive utility such as "d-none d-sm-flex" belongs, so the whole item is hidden and not just its contents.

    • Open in New TabDefaultOff

      Adds target="_blank", use for links that leave the site, not for tel: or mailto:.

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 Info.

Was this page helpful?