7.3 Home page/Landing page View in a new window

Demonstrates the components available for building landing pages like the Homepage.

Twig: templates/homepage.twig

Example

How to Identify asbestos

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

Most popular

How to maintain asbestos

Follow these simple steps to plan and work safely with asbestos.

How to safely dispose

Follow these simple steps to plan and work safely with asbestos.

Health and risks of exposure

Understand the impacts of asbestos exposure.

Latest laws and guidance

This page contains links to the latest laws and guidance, rules and regulations, information for commercial owners.This page contains links to the latest laws

Find a document

Find your nearest asbestos disposal location

Understand what you can and can’t take to your nearest disposal facility before you visit.

Markup
{% include '@asbestos/components/global-alert/global-alert.twig' %}
<div class="">
    {% include '@asbestos/components/header/header.twig' %}
    {% include '@asbestos/components/navigation/nav-main.twig' %}
    {% include '@asbestos/components/banner/banner-plain.twig' with {
            data : {
              "theme": "light",
              "heading": "How to Identify asbestos",
              "copy": "Find out what products might contain asbestos and where they are commonly located.",
              "img": {
                "original": "./images/homepage-banner.png",
                "small": "./images/homepage-banner.png",
                "medium": "./images/homepage-banner.png",
                "large": "./images/homepage-banner.png"
              },
              "svgUrl":"."
            }
        
        } %}
  <div class="nsw-container p-md-0 py-md-5 py-3">
    <div class="mt-3">
        <h2 class="col-12 pb-3">Most popular</h2>
      {% include '@asbestos/components/teasers/teaser-card-list.twig' %}
    </div>
  </div>
<div class="nsw-body-container">
          <div class="nsw-container p-md-0 py-md-5 py-3">
          <h2 class="col-12 pb-3">Useful resources</h2>
          <div class="row m-md-0">
              <div class="col-md-4 mb-4">{% include '@asbestos/components/teasers/teaser-icon.twig' with { 
                    "data" : { heading: 'Find a licensed asbestos removalist', theme: 'headline', icon:"search-red.svg", modifier_class:"--error", svgUrl:"." }
                } %}</div>
                    <div class="col-md-4 mb-4">{% include '@asbestos/components/teasers/teaser-icon.twig' with { 
                    "data" : { heading: 'Understanding the costs of removal and disposal', theme: 'headline', icon:"money-red.svg", modifier_class:"--error", svgUrl:"." }
                } %}</div>
                    <div class="col-md-4 mb-4">{% include '@asbestos/components/teasers/teaser-icon.twig' with { 
                    "data" : { heading: 'Concerned about asbestos near you?', theme: 'headline', icon:"phone-red.svg", modifier_class:"--error", svgUrl:"." }
                } %}</div>
          </div>
          </div>
      </div>
  <div class="nsw-container p-0 py-md-5 py-3">
            <div class="row mt-4 m-0 py-3">
                <div class="col-md-6 col-12">
                    {% include '@asbestos/components/teasers/teaser-small.twig' with { 
                        "data" : { heading: 'For tradies', theme: 'headline', img: { left: './images/hompage-50-1.png' }, rowModifierClass : 'm-0', svgUrl:"."}
                    } %}
                </div>
                <div class="col-md-6 col-12 mt-4 mt-md-0">
                    {% include '@asbestos/components/teasers/teaser-small.twig' with { 
                        "data" : { heading: 'For councils', theme: 'headline', img: { left: './images/hompage-50-2.png' }, rowModifierClass : 'm-0', svgUrl:"."}
                    } %}
                </div>
                
            </div>
    </div>
  <div class="nsw-container p-0 py-md-5 py-3">
        <div class="row mt-2 m-0 py-3">
                <div class="col-md-6 col-12 pr-2 pb-3 border-right">
                    {% include '@asbestos/components/block/block.twig' with { 
                        data : {
                                label: "Latest laws and guidance",
                                content: "This page contains links to the latest laws and guidance, rules and regulations, information for commercial owners.This page contains links to the latest laws ",
                                modifier_class:  "purple-title",
                                content_modifier_class: "mt-3"
                            }
                    } %}
                    {% include '@asbestos/components/buttons/primary-button.twig'  with { 
                                label: "Find a document",
                                modifier_class:  "laws_button"
                    } %}
                </div>
                <div class="col-md-6 col-12 pr-md-0 py-0 px-3 d-flex align-items-start">
                    <img src="./images/location-red.svg" class="nsw-icons d-none d-md-block">
                        <div>
                            {% include '@asbestos/components/block/block.twig' with { 
                            data : {
                                    label: "Find your nearest asbestos disposal location",
                                    content: "Understand what you can and can’t take to your nearest disposal facility before you visit.",
                                    modifier_class:  "purple-title",
                                    content_modifier_class: "mt-3"
                                }
                            } %}
                            <div class="row m-0">
                                {% include '@asbestos/components/buttons/primary-button.twig'  with { 
                                        label: "Search",
                                        modifier_class:  "laws_button"
                                } %}
                            </div>
                        </div>
                    </div>
            </div>
    </div>
  <div class="page-end">
    {% include '@asbestos/components/footer/footer.twig' %}
  </div>
</div>