Docs Block Reference Social

Social

A row of social-network icons that links each one to the matching profile. Profiles themselves are configured globally in Settings — this block just chooses the visual treatment.

When to use it

  • Social row in the footer
  • Social row on a contact page
  • Author byline / "follow me" row

When not to use it

  • A single linkable icon — use Icon Card with a Link URL
  • A custom non-social icon row — use Table
  • Social icons inside the site header — most headers have their

    • own dedicated icon area

The panel includes a hint that reads: "Add social profiles in Settings" — clicking it opens the SEO / Site settings.

Settings

Shape — Circle · Rounded · Square (toggleable)

Background shape behind each icon. Click the active shape to turn the background off (icons show as plain glyphs).

Alignment — Left · Center · Right (default: Center)

Horizontal alignment within the parent container.

Hover effect — Shine · Spin · Grow (toggleable, default: off)

Click again to disable.

  • Shine — light sweep across the icon
  • Spin — rotation on hover
  • Grow — scales up on hover

Brand Colors — checkbox (default: off)

When on, each icon uses its brand colour (Twitter blue, Facebook blue, etc.) and the Hover swatch is dimmed/disabled — the hover treatment uses the brand colour palette automatically.

Colours (3-up row)

  • Color — left swatch — icon foreground (default: dark)
  • Hover — centre swatch — hover colour. Dimmed when **Brand

    • Colors** is on.

  • Background — right swatch — icon background (default: empty)

Sliders

  • Size — 16–48px (default: 24). Icon size.
  • Gap — 4–32px (default: 12). Spacing between icons.

Entrance animation

Standard widget at the bottom.

Per-device overrides

Shape, Align, Hover, sliders all have per-device values.

Common overrides:

  • Hover effect — off on mobile (no cursor)
  • Size — 1–2px smaller on mobile

Common patterns

Footer social row

Shape Circle · Align Center · Hover Grow · Brand Colors off · Background dark · Color light · Size 24 · Gap 12.

Brand-coloured nav strip

Shape Rounded · Brand Colors on · Hover Shine · Size 28 · Gap 16. Brand colours render automatically.

Minimal monochrome

Shape off (toggle off) · Color #999 · Hover #fff · Size 20 · Gap 16.

Related

  • blocks/icon-card — for a single linkable icon (non-social)
  • blocks/table — for a custom icon list with text labels
  • blocks/footer — Site Footer has its own Social Icons

    • toggle that pulls from the same global Settings list