Hero with embedded video
Hero component with embedded video and transcript accordion
Example
H1 Heading
Introduction paragraph text 1
Introduction paragraph text 2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam rutrum sollicitudin nisi, sit amet fermentum nunc condimentum nec. Integer vitae mattis ante. Duis feugiat libero eget enim semper, in viverra felis suscipit.
In lobortis ultricies quam, at laoreet enim aliquam at. Sed consectetur ligula sit amet arcu consequat sagittis. Nunc vulputate euismod purus, in finibus turpis blandit ac. Nulla et sapien ipsum. Nam malesuada viverra quam eu congue.
Donec fermentum luctus faucibus. Etiam gravida neque ut felis pulvinar, et pretium nulla euismod. Sed ac euismod enim.
Nunc imperdiet diam eu erat volutpat, in interdum ante vulputate. Vestibulum elit purus, blandit in fermentum in, porttitor eu libero.
Pellentesque risus orci, auctor in feugiat sodales, pharetra vel nisl. Cras nulla odio, congue nec urna eget, gravida pulvinar odio. Pellentesque a tincidunt ante.
TMauris efficitur volutpat mi sed aliquam. Integer et pellentesque augue. Morbi quis accumsan nisl. Donec sit amet commodo dolor.
Aliquam ut urna consequat, gravida augue in, volutpat diam. Donec quis vulputate tortor.
Nulla porta elit in urna eleifend hendrerit. Donec interdum nulla ex. In at magna vestibulum, gravida purus id, euismod nisl.
- Mauris eget nibh ut lorem porta tincidunt nec quis diam.
- Sed vulputate dapibus ligula, et ultricies lacus faucibus vel.
- Cras blandit massa eu aliquam rutrum.
Mark-up
<div class="slb-hero slb-hero--bg-primary" role="region" aria-label="Hero Heading">
<div class="container">
<div class="row justify-content-between py-0 py-md-5">
<div class="col-12 col-md-8 col-lg-6 py-4 d-flex flex-column">
<h1 class="slb-hero__text mb-2">...</h1>
<p class="slb-hero__text slb-subtitle">...</p>
<p class="slb-hero__text slb-subtitle">...</p>
</div>
<div class="col-12 col-md-4 py-4 d-flex flex-column">
<script src="https://cdn.jwplayer.com/players/vut1Ty1F-GdWyXZd2.js"></script>
<div class="slb-accordion mt-2" aria-label="Information Accordion">
<button class="slb-accordion__toggle collapsed slb-colour-white" id="information-accordion-toggle-1" data-toggle="collapse" data-target="#information-accordion-panel-1" aria-expanded="true" aria-controls="information-accordion-panel-1">
<svg class="slb-accordion__toggle-icon slb-fill-yellow" viewBox="0 0 512 512" id="chevron-circle-down"><title>chevron-circle-down</title><path fill="#ffbb00" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"/></svg>...
</button>
<div class="slb-accordion__panel collapse" id="information-accordion-panel-1" aria-labelledby="information-accordion-toggle-1">
<h3 class="slb-colour-white">...</h3>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<p class="slb-colour-white">...</p>
<ul class="slb-colour-white">
<li class="slb-colour-white">...</li>
<li class="slb-colour-white">...</li>
<li class="slb-colour-white">...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>Dependencies
- Hero
- Bootstrap utilities
- Framework utilities
- JW Player video script