foundation

Icon Grid

Flex-wrap grid of icon tiles with circular / rounded / minimal icon backgrounds. Centres its last row — distinct from the general Grid block.

icon-grid foundation

Keywords

icons, features, services, grid

Metadata

Slugicon-grid

Categoryfoundation

Default containerstandard

Statuspublished

Variants

layout auto · fixed

icon_style circle · rounded · minimal

background light · alt · dark

size md · lg

columns 3 · 4

Fields (9)

Eyebrow text
Heading text
Intro textarea
Layout button_group
Icon style button_group
Columns button_group
Background button_group
Padding button_group
Items repeater

Use in a mockup

Copy this as the wrapper in your mockup's HTML — fill the inner markup per the Mockup Spec.

<section class="section icon-grid"
         data-block="icon-grid"
         data-surface="light"
         data-layout="auto"
                  data-container="standard">
  <div class="container container--standard">
    <div class="icon-grid__inner">
      <!-- block content -->
    </div>
  </div>
</section>