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