ZeroPoint Block Library

---
title: Callout
description: A callout component to highlight important information.

# Default values
heading: Help organize the 11ty Meetup!
textContent: A callout component to highlight important information.
links:
  - linkUrl: #
    linkText: Join the 11ty Meetup!
  - linkUrl: #
    linkText: Learn more about 11ty Meetup!
background: light

#CMS Fields
cms:
  - name: heading
    label: Heading
    widget: string
  - name: textContent
    label: Text Content
    widget: markdown
  - name: links
    label: Links
    widget: list
    listItemLabel: Link
    fields:
      - name: linkUrl
        label: Link URL
        widget: string
      - name: linkText
        label: Link Text
        widget: string
  - name: background
    label: Background Color
    widget: select
    options:
      - { label: "Light", value: "light" }
      - { label: "Dark", value: "dark" }
      - { label: "Primary", value: "primary" }
      - { label: "Secondary", value: "secondary" }
---

{# Optional component CSS #}
{%- componentCss -%}
.block-callout {
  background-color: var(--color-{{ background }});
  color: var(--color-contrast-{{ background }});
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--unit);
  margin-bottom: var(--unit);

  .buttons {
    justify-content: center;
  }
}

@media (min-width: 992px) {
  .block-callout {
    .buttons {
      justify-content: flex-start;
    }
  }
}
{%- endcomponentCss -%}


<section class="block block-{{ title | slugify }}">
  <article class="container">
    <header>
      <h2>{{ heading }}</h2>
    </header>
    {{- textContent | safe -}}
    <footer>
      <nav class="buttons">
      {%- for link in links -%}
        <a
          href="{{ link.linkUrl }}"
          class="button {{ 'button-primary' if loop.first else 'button-secondary' }}"
        >
          {{- link.linkText -}}
        </a>
      {%- endfor -%}
      </nav>
    </footer>
  </article>
</section>

---
# Required fields
title: Icon Group
description: A group of icons with optional labels.

# Default values
icons:
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M192 96c0-53 43-96 96-96s96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6zm345.6 12.8c10.6 14.1 7.7 34.2-6.4 44.8l-97.8 73.3c5.3 8.9 9.3 18.7 11.8 29.1l98.8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-96 0 0 32c0 2.6-.1 5.3-.2 7.9l83.4 62.5c14.1 10.6 17 30.7 6.4 44.8s-30.7 17-44.8 6.4l-63.1-47.3c-23.2 44.2-66.5 76.2-117.7 83.9L312 280c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 230.2c-51.2-7.7-94.5-39.7-117.7-83.9L83.2 473.6c-14.1 10.6-34.2 7.7-44.8-6.4s-7.7-34.2 6.4-44.8l83.4-62.5c-.1-2.6-.2-5.2-.2-7.9l0-32-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l98.8 0c2.5-10.4 6.5-20.2 11.8-29.1L44.8 153.6c-14.1-10.6-17-30.7-6.4-44.8s30.7-17 44.8-6.4L192 184c12.3-5.1 25.8-8 40-8l112 0c14.2 0 27.7 2.8 40 8l108.8-81.6c14.1-10.6 34.2-7.7 44.8 6.4z"/></svg>
    label: Bug Icon
    link: "#"
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M407 47c9.4-9.4 24.6-9.4 33.9 0l17.2 17.2c1.9-.1 3.9-.2 5.8-.2l32 0c11.2 0 21.9 2.3 31.6 6.5L543 55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L564 101.9c7.6 12.2 12 26.7 12 42.1 0 10.2 7.4 18.8 16.7 23 27.9 12.5 47.3 40.5 47.3 73 0 26.2-12.6 49.4-32 64l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-16-64 0 0 16c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-17.6c-11.8-2.4-22.7-7.4-32-14.4-1.5-1.1-2.9-2.3-4.3-3.5-17-14.7-27.7-36.4-27.7-60.5 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 44.7 26.2 83.2 64 101.2l0 10.8c0 17.7 14.3 32 32 32l32 0 0 64c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-76c-19.8 7.7-41.4 12-64 12s-44.2-4.3-64-12l0 76c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32-14.3-32-32l0-118.9-18.1 40.7c-5.4 12.1-19.6 17.6-31.7 12.2S-3.3 362.4 2.1 350.3L24 300.9c5.3-11.9 8-24.7 8-37.7 0-107.5 85.2-195.2 191.8-199.1l.2-.1 64 0c41.7 0 83.4 12.1 117.2 25.7 1.7-1.8 3.5-3.6 5.3-5.2L407 81c-9.4-9.4-9.4-24.6 0-33.9zm73 185a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zm88 24a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM480 144a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm48 16a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg>
    label: Hippo Icon
    link: "#"
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M181.5 197.1l12.9 6.4c5.9 3 12.4 4.5 19.1 4.5 23.5 0 42.6-19.1 42.6-42.6l0-21.4c0-35.3-28.7-64-64-64l-64 0c-35.3 0-64 28.7-64 64l0 21.4c0 23.5 19.1 42.6 42.6 42.6 6.6 0 13.1-1.5 19.1-4.5 9.3-4.7 16.4-8.2 21.2-10.6L135.1 185c-4.5-3-7.1-8-7.1-13.3l0-3.7c0-13.3 10.7-24 24-24l16 0c13.3 0 24 10.7 24 24l0 3.7c0 5.3-2.7 10.3-7.1 13.3l-11.8 7.9 8.4 4.2zm-8.6 49.4l-12.9-6.4-12.9 6.4c-12.6 6.3-26.5 9.6-40.5 9.6-3.6 0-7.1-.2-10.6-.6l0 .6c0 35.3 28.7 64 64 64l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l160 0 0-64c0-23.7 12.9-44.4 32-55.4 9.4-5.4 20.3-8.6 32-8.6l0-16c0-26.5 21.5-48 48-48 8.8 0 16 7.2 16 16l0 96c0 8.8 7.2 16 16 16s16-7.2 16-16l0-99.7c0-48.2-30.8-91-76.6-106.3l-8.5-2.8c-8-2.7-12.6-11.1-10.4-19.3s10.3-13.2 18.6-11.6l19.9 4C576 86.1 640 164.2 640 254.9l0 1.1 0 0c0 123.7-100.3 224-224 224l-160.6 0C132 480 32 380 32 256.6l0-39.8c-10.1-14.6-16-32.3-16-51.4l0-21.4 0-1.4C6.7 139.3 0 130.5 0 120 0 106.7 10.7 96 24 96l2.8 0C44.8 58.2 83.3 32 128 32l64 0c44.7 0 83.2 26.2 101.2 64l2.8 0c13.3 0 24 10.7 24 24 0 10.5-6.7 19.3-16 22.6l0 1.4 0 21.4c0 1.4 0 2.8-.1 4.3 12-6.2 25.7-9.6 40.1-9.6l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-13.3 0-24 10.7-24 24l0 8 56.4 0c-15.2 17-24.4 39.4-24.4 64l-32 0c-42.3 0-78.2-27.4-91-65.3-5.1 .9-10.3 1.3-15.6 1.3-14.1 0-27.9-3.3-40.5-9.6zM96 128a16 16 0 1 1 0 32 16 16 0 1 1 0-32zm112 16a16 16 0 1 1 32 0 16 16 0 1 1 -32 0z"/></svg>
    label: Otter Icon
    link: "#"
  - icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M32 112c16.6 0 30.2 12.6 31.8 28.7l.3 6.6C65.8 163.4 79.4 176 96 176l179.1 0 140.9 60.4 0 243.6c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-131.3C296 361 268.8 368 240 368s-56-7-80-19.3L160 480c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-245.6c-37.3-13.2-64-48.6-64-90.4 0-17.7 14.3-32 32-32zM355.8-32c7.7 0 14.9 3.6 19.6 9.8L392 0 444.1 0c12.7 0 24.9 5.1 33.9 14.1L496 32 552 32c13.3 0 24 10.7 24 24l0 24c0 44.2-35.8 80-80 80l-64 0-7 28-124.7-53.4 31.6-147.2C334.3-23.9 344.2-32 355.8-32zM448 44a20 20 0 1 0 0 40 20 20 0 1 0 0-40z"/></svg>
    label: Dog Icon
    link: "#"

# CMS fields
cms:
  - name: icons
    label: Icons
    widget: list
    listItemLabel: Icon
    fields:
      - name: icon
        label: Icon (SVG or FontAwesome name)
        widget: string
      - name: label
        label: Label
        widget: string
      - name: link
        label: Link
        widget: string
---

{# Optional component CSS #}
{%- componentCss -%}
.block-icon-group ul.icon-group {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
  align-items: center;
  text-align: center;

  li {
    position: relative;
  }

  a {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  }

  svg {
    max-width: calc(var(--unit) * 3);
    height: auto;
  }
}
{%- endcomponentCss -%}

{# Component HTML, using the default values above #}
<section class="block block-{{ title | slugify }}">
  <div class="container">
    {%- if icons and icons | length > 0 -%}
      <ul class="icon-group">
        {%- for item in icons -%}
          <li>
            <figure>
              {%- if item.icon -%}
                {{- item.icon | safe -}}
              {%- endif -%}
            </figure>
            <a href="{{ item.link }}" class="icon-item" aria-label="{{ item.label }}">
              <span class="icon-label">{{ item.label }}</span>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
</section>

---
# Required fields
title: Link Group
description: A group of links, typically used for navigation or related resources.

# Default values
links:
  - link: "#"
    linkText: Lorem Ipsum
  - link: "#"
    linkText: Dolor Sit Amet
  - link: "#"
    linkText: Consectetur

# CMS Fields
cms:
  - name: links
    label: Links
    widget: list
    listItemLabel: Link
    fields:
      - name: link
        label: Link URL
        widget: string
      - name: linkText
        label: Link Text
        widget: string
---

{# Optional component CSS #}
{%- componentCss -%}
.block-link-group nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--unit);
  flex-wrap: wrap;
}

@media (min-width: 992px) {
  .block-link-group nav {
    flex-direction: row;
  }
}
{%- endcomponentCss -%}

{# Component HTML, using the default values above #}
<section class="block block-{{ title | slugify }}">
  <div class="container">
    <nav>
      {%- for link in links -%}
        <a href="{{ link.link }}">{{ link.linkText }}</a>
      {%- endfor -%}
    </nav>
  </div>
</section>

---
# Required fields
title: Text
description: A block of rich text content.

# Default values
textContent: >-
  Lorem ipsum dolor sit _amet_.

# CMS Fields
cms:
  - name: textContent
    label: Body
    widget: markdown
---

{# Component HTML, using the default values above #}
<section class="block block-{{ title | slugify }}">
  <article class="container">
    {{- textContent | markdown | safe -}}
  </article>
</section>

---
title: Text and Image
description: Image and text component with customizable layout and background color.

# Default values
heading: Text and image component
textContent: A component that combines text and an image.
image: ./possums.jpg
imageAlt: A cute possum
imagePosition: right
background: primary

# CMS Fields
cms:
  - name: heading
    label: Heading
    widget: string
  - name: textContent
    label: Text Content
    widget: markdown
  - name: image
    label: Image
    widget: image
  - name: imageAlt
    label: Image Alt Text
    widget: string
  - name: imagePosition
    label: Image Position
    widget: select
    options:
      - { label: "Left", value: "left" }
      - { label: "Right", value: "right" }
  - name: background
    label: Background Color
    widget: select
    options:
      - { label: "Light", value: "light" }
      - { label: "Dark", value: "dark" }
      - { label: "Primary", value: "primary" }
      - { label: "Secondary", value: "secondary" }
---

{# Optional component CSS #}
{% componentCss %}
.block-text-and-image {
  background-color: var(--color-{{ background }});
  color: var(--color-contrast-{{ background }});
  padding: var(--unit);
  border-radius: var(--border-radius);

  figure {
    img {
      border-radius: var(--border-radius);
    }
  }

  &.block-text-and-image-left {
    figure {
      order: -1;
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--unit);
  }

  @media (min-width: 992px) {
    padding: calc(var(--unit) * 4 );

    .container {
      flex-direction: row;
      align-items: flex-start;
      gap: calc(var(--unit) * 2);
    }

    figure {
      transform: rotate(6deg);
    }
  }
}
{% endcomponentCss %}


{# Component HTML, using the default values above #}
<section class="block block-{{ title | slugify }} block-{{ title | slugify }}-{{ imagePosition }}">
  <div class="container">
    <article>
      {%- if heading -%}
        <h2>{{ heading }}</h2>
      {%- endif -%}
      {%- if textContent -%}
        {{- textContent | safe -}}
      {%- endif -%}
    </article>
    {%- if image -%}
    <figure>
      <img src="{{ image }}" alt="{{ imageAlt }}" />
    </figure>
    {%- endif -%}
  </div>
</section>