5.4 Callout View in a new window

The default callout shows a small amount of information without any interactions or icons.

Twig: components/callout/callout.twig

Example

We strongly recommend you use a licensed asbestos accessor or removalist

This Asbestos Finder contains general information and your building might contain asbestos not described here.

Markup 
{% set data = data|default({
  "heading": "We strongly recommend you use a licensed asbestos accessor or removalist",
  "copy": "This Asbestos Finder contains general information and your building might contain asbestos not described here.",
  "svgUrl":"."
}) 
%}

<div class="nsw-callout {{data.modifier_class}}">
  {% if data.icon %}
  <img src="{{data.svgUrl}}/images/{{data.icon}}.svg" class="nsw-icon nsw-callout__icon blue-icon-contrast" focusable="false" aria-hidden="true">
    {% endif %}
  <div class="nsw-callout__content">
    {% if data.heading %}
      <h4 class="nsw-callout__title">{{data.heading}}</h4>
    {% endif %}
    {% if data.copy %}
      <p>{{data.copy}}</p>
    {% endif %}
    {% if data.link %}<a href="{{data.link.href}}" class="nsw-text-link">{{data.link.text}}</a>{% endif %}
  </div>
</div>