Example
image alt

How to identify asbestos

Find out what products might contain asbestos and where they are commonly located.

Markup
{% set data = data|default({
  "theme": "dark",
  "heading": "How to identify asbestos",
  "copy": "Find out what products might contain asbestos and where they are commonly located.",
  "imgAlt":"image alt",
  "img": {
    "original": "https://picsum.photos/id/421/2000/1250",
    "small": "https://picsum.photos/id/421/768/480",
    "medium": "https://picsum.photos/id/421/300/200",
    "large": "https://picsum.photos/id/421/2000/1250"
  },
  "linkUrl":"",
  "svgUrl":"."
}) %}
<div class="nsw-hero-banner nsw-hero-banner--{{data.theme}}">
  <div class="nsw-container">
    <div class="nsw-hero-banner__image-area">
      <img src="{{data.img.original}}" class="nsw-hero-banner__image" alt="{{data.imgAlt}}">
    </div>
    <div class="nsw-hero-banner__content-area">
      <div class="nsw-hero-banner__content">
        <h2 class="nsw-hero-banner__title">
          <a href="{{data.linkUrl}}" class="nsw-hero-banner__link">{{data.heading}}</a>
        </h2>
        <p>{{data.copy}}</p>
        <div class="nsw-icon nsw-hero-banner__icon"> 
          {% if data.theme == 'dark' %}
            <img src="{{data.svgUrl}}/images/arrow-white.svg" class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          {% else %}
              <img src="{{data.svgUrl}}/images/arrow-blue.svg" class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          {% endif %}
        </div>
        
      </div>
    </div>
  </div>
</div>