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