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
<div class="c-signpost">
  <h3>Prospectus</h3>
  <p>Order or download your copy of our undergraduate prospectus for 2015 entry.</p>
  <a class="c-btn c-btn--medium" href="http://www.york.ac.uk/study/undergraduate/prospectus/" role="button">Get a prospectus</a>
</div>

You can have an icon:

Prospectus

Order or download your copy of our undergraduate prospectus for 2015 entry.

Get a prospectus
<div class="c-signpost">
  <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>
  <a class="c-btn c-btn--medium" href="http://www.york.ac.uk/study/undergraduate/prospectus/" role="button">Get a prospectus</a>
</div>

Multiple signposts can be used together within a row of a grid:

Prospectus

Order or download your copy of our undergraduate prospectus for 2015 entry.

Get a prospectus

Any questions?

Ask us a question or see what our current students are saying in our forum on The Student Room.

Ask us a question

Received an offer?

View your application, arrange a visit and see all the information you need.

Log in to You@York
<div class="o-grid__row">
  <div class="o-grid__box o-grid__box--third">
    <div class="c-signpost">
      <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>
      <a class="c-btn c-btn--medium" href="http://www.york.ac.uk/study/undergraduate/prospectus/" role="button">Get a prospectus</a>
    </div>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <div class="c-signpost">
      <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>
      <a class="c-btn c-btn--medium" href="http://www.thestudentroom.co.uk/forumdisplay.php?f=30" role="button">Ask us a question</a>
    </div>

  </div>
  <div class="o-grid__box o-grid__box--third">
    <div class="c-signpost">
      <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>
      <a class="c-btn c-btn--medium" href="http://www.york.ac.uk/study/you-at-york/" role="button">Log in to You@York</a>
    </div>

  </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)