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)