Callout - Component

<aside class="callout {{ data.utilities }}">
  <div class="repel">
    <div class="callout__content flow">
      {% if data.branding %}
        <div class="callout__branding cluster gutter-base">
          {% if data.icon %}
            {% include "icons/" + data.icon %}
          {% endif %}
          {{ data.branding }}
        </div>
      {% endif %}
      <h2 class="callout__title">{{ data.title }}</h2>
      <p>{{ data.summary }}</p>
    </div>
    <nav class="callout__links repel" aria-label="{{ data.title }} links">
      <ul role="list">
        {% for item in data.links %}
          <li>
            <a href="{{ item.url }}" {% if item.active %}aria-current="page"{% endif %}>
              <span>{{ item.text }}</span>
              {% include "icons/carat-forward.svg" %}
            </a>
          </li>
        {% endfor %}
      </ul>
    </nav>
  </div>
</aside>

<aside class="callout bg-quaternary-box-bg color-quaternary-box-text">
  <div class="repel">
    <div class="callout__content flow">
      <div class="callout__branding cluster gutter-base">
        <svg
          width="24"
          height="24"
          viewbox="0 0 24 24"
          fill="currentColor"
          role="img"
          aria-label="Code brackets"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M9.41 16.59L8 18l-6-6 6-6 1.41 1.41L4.83 12l4.58 4.59zm5.18-9.18L16 6l6 6-6 6-1.41-1.41L19.17 12l-4.58-4.59z"
          />
        </svg>
        Codelabs
      </div>
      <h2 class="callout__title">See it in action</h2>
      <p>Learn more and put this guide into action.</p>
    </div>
    <nav class="callout__links repel" aria-label="See it in action links">
      <ul role="list">
        <li>
          <a href="#">
            <span>Payment form best practices codelab</span>
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8 7.34075L12.58 11.7053L8 16.0699L9.41 17.4106L15.41 11.7053L9.41 6L8 7.34075Z"
              />
            </svg>
          </a>
        </li>
        <li>
          <a href="#">
            <span>Address form best practices codelab</span>
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8 7.34075L12.58 11.7053L8 16.0699L9.41 17.4106L15.41 11.7053L9.41 6L8 7.34075Z"
              />
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</aside>