IconBlock

Purpose

The IconBlock component renders a responsive set of “icon + title + text” items (benefits/features style layout).

It supports:

Column layout controlled by settings.columns

Optional link per icon item (turns the entire item into an external link)

Optional image per item

Optional header + text per item

Inputs (model contract)

Model shape (storefront example)

{
  "name": "IconBlock",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "columns": 4,
    "blockExtended": false,
    "textColor": "#ffffff",
    "icons": [
      {
        "text": "Sample text",
        "header": "Sample text",
        "image": {
          "id": "Image Id",
          "galleryId": "Gallery Id",
          "link": "https://example.com/media/sample.jpg",
          "mediaType": "Image"
        },
        "link": "/sample"
      },
      "..."
    ],
    "id": "Component Id",
    "section": "SectionA",
    "type": "IconBlock",
    "name": "IconBlock",
    "configuredInContentApi": false,
    "view": "Default",
    "displayName": "Sample text",
    "cssClass": "(UNDEFINED)"
  },
  "translations": {
    "clickToLearnMoreAbout": "Sample text",
    "iconBlock": "Sample text",
    "imageFor": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id
Used for wrapper id: comp-{{ id }}.

settings.icons[]
The list of icon items to render.

Optional fields

settings.cssClass
Applied only when non-empty and not (UNDEFINED).

settings.columns (number)
Controls the column width on large screens:

1 → lg:w-full

2 → lg:w-1/2

3 → lg:w-1/3

4 → lg:w-1/4

other → defaults to full width

translations.*
Used for accessibility (aria-label, alt text fallbacks).

JavaScript

Global object

The component includes a JS file for consistency, but it does not implement any client-side behavior.

Typical shape:

Functions

None.

Advice

Keep this component render-only. Add JS here only if you introduce new interactive requirements (e.g., carousel behavior, hover tooltips, analytics click tracking).

Dependencies

None (pure Liquid + Tailwind classes).

Uses translations for accessibility labels.

Notes

Linked items open in a new tab (target="_blank"). If you want the strictest security posture for external links, add rel="noopener noreferrer" in the template.

settings.blockExtended and settings.textColor exist in the model example but are not used by the current Noir template.

Extras

Template behavior (Liquid + Alpine)

Layout / columns

The template computes colClass from settings.columns and applies it to each item wrapper.

Items are inside a flex row layout (container-lg-row) with gaps.

Rendering rules per item

For each icon item:

If icon.image.link is present → renders <img> with:

alt = "{{ translations.imageFor }} <header or translations.iconBlock>"

If icon.header is present → renders <h2>

If icon.text is present → renders <p>

If icon.link is present:

wraps the block with <a href="..." target="_blank">

uses translations.clickToLearnMoreAbout in aria-label

IconBlock

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

Functions#

Advice#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Layout / columns#

Rendering rules per item#