Page intro
The page intro pattern can be used at the top of any full width page layout to display the key information in a format that aids readability. It can also be used at the top of full width page layouts as an alternative to the hero banner pattern - where there is a need for more text while retaining an image.
Rules for page intro
- The page intro can only be used on a full width page layout.
- The page intro must only be used once on a page.
- The page intro must appear at the top of the page content, directly under the breadcrumbs (if used) or otherwise directly under the navigation bar.
- It may also be used directly under the hero banner pattern rather than as a replacement for it if appropriate.
- When used on a top-level landing page the larger heading size should be used.
- The heading is required and must be the only
h1on the page. It should provide a descriptive title for the main purpose of the page.
Options available
Page intro - basic requirements
The simplest implementation must include a heading and some introduction text.
This is the heading of the page
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.
Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.</p><p>Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.</p>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - lead paragraph
If the first paragraph provides a short summary of the page then it is recommended that this has the lead class applied to give it greater visual importance.
- Only the first paragraph can be made a lead paragraph.
This is the heading of the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.</p>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - larger heading
This should be used to designate the page has greater importance over others. Example uses could be include a homepage, a section top-level page or a standalone landing page.
This a larger heading for the section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro">
<div class="page-intro__text">
<h1 class="page-intro__heading page-intro__heading--large">This a larger heading for the section</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat.</p>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - call-to-actions
One or two call-to-action buttons may be used to link to the primary goals of the page.
This is the heading of the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. </p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget.</p>
<p><a class="btn btn-action" href="#">Call to action</a><a class="btn btn-action-secondary" href="#">Secondary call to action</a></p>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - search
The Search banner (constrained) pattern may be used to provide a search function.
This is the heading of the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. </p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget.</p>
<div class="search-bar search-bar__constrained search-bar__blue">
<h2 class="search-bar__heading">Search this section</h2>
<form class="dpl-form" action="">
<div class="input-group input-group-lg">
<input id="banner-search-constrained" class="form-control" type="text" title="Enter search keywords" maxlength="256" name="search" placeholder="Search by keyword or phrase">
<span class="input-group-btn">
<button class="btn btn-primary" value="Search" type="submit">
<i class="fa fa-search" title="Search"></i>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - image
An image may be included to provide a visual introduction to the page content and support the text. This example shows a landscape formatted image with large heading text.
- The image must be larger than the minimum dimentsions of 300px wide and 300px high.
- The image can be any ratio.
- The image should be no larger than 750px wide and 500px high.
This a larger heading for the section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet. Donec congue vulputate massa, vitae pharetra orci vulputate eget.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro page-intro--has-media">
<div class="page-intro__text">
<h1 class="page-intro__heading page-intro__heading--large">This a larger heading for the section</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet. Donec congue vulputate massa, vitae pharetra orci vulputate eget.</p>
</div>
<div class="page-intro__media">
<figure class="page-intro__media-wrapper">
<img src="../../assets/docs/images/placeholders/750x500.png" alt="750 by 500px place holder image" />
</figure>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - image with caption
Images may be further enhanced with a caption to provide additional details. This example shows an image with square ratio.
This is the heading of the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet. Donec congue vulputate massa, vitae pharetra orci vulputate eget.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro page-intro--has-media">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet. Donec congue vulputate massa, vitae pharetra orci vulputate eget.</p>
</div>
<div class="page-intro__media">
<figure class="page-intro__media-wrapper">
<img src="../../assets/docs/images/placeholders/500x500.jpg" alt="750 by 500px place holder image" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt.</figcaption>
</figure>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - after hero banner
The page intro can also be used immediately after the hero banner pattern to convey additional supporting introductory text.
In this case the hero banner will contain the page's <h1> heading so a <h2> should be used instead. This example includes a video and caption.
- The heading must not be a
<h1>. - Call to actions should be used in the hero banner in this scenario rather than the subsequent page intro.
This an additional heading for the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.
Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.
<!-- Begin pattern: page intro //-->
<!-- Thie inclusion of the hero-secion is for example purposes only and is only here to show how the heading sizes change when used in this situation-->
<section class="hero-section hidden"><code>Hero banner would appear here</code></section>
<!-- Copy code from beyond this point -->
<div class="page-intro__wrapper">
<div class="page-intro page-intro--has-media">
<div class="page-intro__text">
<h2 class="page-intro__heading">This an additional heading for the page</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.</p><p>Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.</p>
</div>
<div class="page-intro__media">
<figure class="page-intro__media-wrapper">
<img src="../../assets/docs/images/placeholders/750x500.png" alt="750 by 500px place holder image" />
</figure>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - video - deprecated
This option is no longer supported
This implementation is deprecated and will be removed in a future version of the digital pattern library. Videos should use the featured media pattern.
This is the heading of the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.
Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro page-intro--has-media">
<div class="page-intro__text">
<h1 class="page-intro__heading">This is the heading of the page</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.</p><p>Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.</p>
</div>
<div class="page-intro__media">
<figure class="page-intro__media-wrapper">
<div class="embed-responsive embed-responsive-16by9 youtube-embed"><iframe title="St Andrews from above" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/pscNTzAGVnk"></iframe></div>
</figure>
</div>
</div>
</div>
<!-- End pattern: page intro //-->Page intro - video with caption - deprecated
This option is no longer supported
This implementation is deprecated and will be removed in a future version of the digital pattern library. Videos should use the featured media pattern.
This a larger heading for the section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.
Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.
Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.
<!-- Begin pattern: page intro //-->
<div class="page-intro__wrapper">
<div class="page-intro page-intro--has-media">
<div class="page-intro__text">
<h1 class="page-intro__heading page-intro__heading--large">This a larger heading for the section</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt. Mauris sodales eleifend sodales. Nunc aliquam blandit ipsum ac rutrum. Pellentesque sapien erat, consectetur sed dui nec, rutrum congue sem.</p>
<p>Nulla viverra justo vitae erat lobortis, eu consectetur risus faucibus. Nulla non enim nec eros congue eleifend. Quisque vel aliquet sapien. Duis ultricies dictum justo, et convallis nulla lacinia eget. Etiam magna mauris, pellentesque ut ornare vel, commodo et lacus. Integer rutrum non nulla sed consequat. Etiam tincidunt vel quam id rhoncus. Suspendisse et justo at mauris tempor ornare. Ut pulvinar condimentum felis accumsan egestas. Nunc bibendum tincidunt magna, a mattis mi tincidunt nec. Ut nunc est, scelerisque in imperdiet at, maximus ut nulla. Mauris sollicitudin dui quis ante dapibus, vel tempus tellus tempor. Etiam elementum neque erat, in interdum lacus accumsan sit amet.</p><p>Donec congue vulputate massa, vitae pharetra orci vulputate eget. Vestibulum sagittis eros id mauris blandit tincidunt. Sed in pellentesque orci, fermentum tincidunt enim. Morbi a dictum nunc. Nulla a metus ut erat euismod auctor. Fusce finibus arcu sit amet tortor blandit, sed tempus ipsum faucibus. Cras ut lectus iaculis, pellentesque leo nec, accumsan purus. Vivamus nec nunc maximus lorem dapibus volutpat.</p>
</div>
<div class="page-intro__media">
<figure class="page-intro__media-wrapper">
<div class="embed-responsive embed-responsive-16by9 youtube-embed"><iframe title="St Andrews from above" class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/pscNTzAGVnk"></iframe></div>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque hendrerit neque et tincidunt <a href="#">view transcript</a>.</figcaption>
</figure>
</div>
</div>
</div>
<!-- End pattern: page intro //-->