Signposts are used to show a series of next steps or calls to action. They can be used on their own at full width, or within multiple column grids
The default signpost has a heading, text and a link.
Prospectus
Order or download your copy of our undergraduate prospectus for 2015 entry.
Get a prospectus<a class="c-signpost" href="http://www.york.ac.uk/study/undergraduate/prospectus/">
<h3>Prospectus</h3>
<p>Order or download your copy of our undergraduate prospectus for 2015 entry.</p>
<span class="c-btn c-btn--medium">Get a prospectus</span>
</a>
You can have an icon:
Prospectus
Order or download your copy of our undergraduate prospectus for 2015 entry.
Get a prospectus<a class="c-signpost" href="http://www.york.ac.uk/study/undergraduate/prospectus/">
<i class="c-signpost__icon c-icon c-icon--book c-icon--4x" aria-hidden="true"></i>
<h3>Prospectus</h3>
<p>Order or download your copy of our undergraduate prospectus for 2015 entry.</p>
<span class="c-btn c-btn--medium">Get a prospectus</span>
</a>
Multiple signposts can be used together within a row of a grid:
<div class="o-grid__row">
<div class="o-grid__box o-grid__box--third">
<a class="c-signpost" href="http://www.york.ac.uk/study/undergraduate/prospectus/">
<i class="c-signpost__icon c-icon c-icon--book c-icon--4x" aria-hidden="true"></i>
<h3>Prospectus</h3>
<p>Order or download your copy of our undergraduate prospectus for 2015 entry.</p>
<span class="c-btn c-btn--medium">Get a prospectus</span>
</a>
</div>
<div class="o-grid__box o-grid__box--third">
<a class="c-signpost" href="http://www.thestudentroom.co.uk/forumdisplay.php?f=30">
<i class="c-signpost__icon c-icon c-icon--comments c-icon--4x" aria-hidden="true"></i>
<h3>Any questions?</h3>
<p>Ask us a question or see what our current students are saying in our forum on The Student Room.</p>
<span class="c-btn c-btn--medium">Ask us a question</span>
</a>
</div>
<div class="o-grid__box o-grid__box--third">
<a class="c-signpost" href="http://www.york.ac.uk/study/you-at-york/">
<i class="c-signpost__icon c-icon c-icon--thumbs-o-up c-icon--4x" aria-hidden="true"></i>
<h3>Received an offer?</h3>
<p>View your application, arrange a visit and see all the information you need.</p>
<span class="c-btn c-btn--medium">Log in to You@York</span>
</a>
</div>
</div>
<div class="o-grid__row">
<div class="o-grid__box o-grid__box--half">
<a class="c-signpost" href="http://www.york.ac.uk/study/undergraduate/prospectus/">
<i class="c-signpost__icon c-icon c-icon--book c-icon--4x" aria-hidden="true"></i>
<h3>Short one</h3>
<p>Short content.</p>
<span class="c-btn c-btn--medium">CTA</span>
</a>
</div>
<div class="o-grid__box o-grid__box--half">
<a class="c-signpost" href="http://www.thestudentroom.co.uk/forumdisplay.php?f=30">
<i class="c-signpost__icon c-icon c-icon--comments c-icon--4x" aria-hidden="true"></i>
<h3>Any questions?</h3>
<p>Ask us a question or see what our current students are saying in our forum on The Student Room.</p>
<span class="c-btn c-btn--medium">Ask us a question</span>
</a>
</div>
</div>
Options
Molecules
- signpost
- content: text to go in the signpost itself (required)
- title: text to go in the signpost header (required)
- icon: name of icon to go above the title
- cta: text to be used on the cta button (required)
- href: target URL for the cta button (required)