Pathfinder

The pathfinder is used to funnel the user to a certain area and can have up to four boxes. If you would like one particular box to stand out above the rest, a class of prominent can be added.

Pathfinder boxes cannot be disabled. Either don't show the box at all, or create a page for the box and explain whatever needs to be explained (e.g. "This course is not yet provided." in a notice at the top of the page)

Reference articles

Using the pathfinder component effectively

Two boxes

Prima vitae
Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
Call to action
Ex debet appellantur eam
Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
Call to action

<ul class="pathfinder-2">
  <li>
    <a href="#"><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href="#"><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Two boxes soft

<ul class="pathfinder-2 soft">
  <li>
    <a href="#"><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href="#"><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Three boxes

<ul class="pathfinder-3">
  <li>
    <a href=""><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
      <p>
        Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Four boxes

<ul class="pathfinder-4">
  <li>
    <a href=""><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
      <p>
        Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ea copiosae philosophia vim</span></strong>
      <p>
        Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Featured boxes

<ul class="pathfinder-4">
  <li>
    <a href=""><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a class="featured" href=""><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo, nisl vide mei ei. Ea copiosae philosophia vim. Ex vel civibus inimicus consulatu, ad cetero ceteros rationibus…
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
      <p>
        Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ea copiosae philosophia vim</span></strong>
      <p>
        Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui
      </p>
      <span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Featured Boxes should never sit on the outside

Xhtml compliant markup

<ul class="pathfinder-3">
  <li>
    <a href=""><strong><span>Prima vitae</span></strong><span class="text">Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…</span><span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ex debet appellantur eam</span></strong><span class="text">Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo, nisl vide mei ei. Ea copiosae philosophia vim. Ex vel civibus inimicus consulatu, ad cetero ceteros rationibus…</span><span class="button-small brand">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Qui ut mucius fuisset</span></strong><span class="text">Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis</span><span class="button-small brand">Call to action</span></a>
  </li>
</ul>

Use the alternate markup span class="text" rather than p in systems where XHTML rules are enforced (eg. Wordpress), to prevent code cleaners from rearranging the markup.

Background image

Title

<section class="fullwidth short fixed-background" style="background-image:url('/assets/example/alan_gilbert.jpg');">
  <h1 class="title">
    Title
  </h1>
  <ul class="pathfinder-3 white">
    <li>
      <a href=""><strong><span>Ex debet appellantur eam</span></strong>
        <p>
          Cu idque nulla eos, modus sensibus constituam et quo. Ne mel duis simul, quo ad euismod partiendo, nisl vide mei ei. Ea copiosae philosophia vim. Ex vel civibus inimicus consulatu, ad cetero ceteros rationibus…
        </p>
        <span class="button-small brand">Call to action</span></a>
    </li>
    <li>
      <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
        <p>
          Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
        </p>
        <span class="button-small brand">Call to action</span></a>
    </li>
    <li>
      <a href=""><strong><span>Ea copiosae philosophia vim</span></strong>
        <p>
          Eripuit postulant honestatis eu has, vel an enim duis. Ei labore adolescens eum. Vidisse adolescens ei sit, eu feugiat adipisci qui
        </p>
        <span class="button-small brand">Call to action</span></a>
    </li>
  </ul>
</section>

Soft

<ul class="pathfinder-3 soft">
  <li>
    <a href=""><strong><span>Prima vitae</span></strong>
      <p>
        Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
      </p>
      <span class="button-small">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Ex debet appellantur eam</span></strong>
      <p>
        Cu abitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne
      </p>
      <span class="button-small">Call to action</span></a>
  </li>
  <li>
    <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
      <p>
        Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
      </p>
      <span class="button-small">Call to action</span></a>
  </li>
</ul>

Soft background image

Title

<section class="fullwidth short fixed-background" style="background-image:url('/assets/example/alan_gilbert.jpg');">
  <h1 class="title">
    Title
  </h1>
  <ul class="pathfinder-3 soft">
    <li>
      <a href=""><strong><span>Prima vitae</span></strong>
        <p>
          Prima vitae labitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne nam. Vix eu omnium recteque consectetue…
        </p>
        <span class="button-small">Call to action</span></a>
    </li>
    <li>
      <a href=""><strong><span>Ex debet appellantur eam</span></strong>
        <p>
          Cu abitur ut eam, at omnes facilis constituam quo. Commune gloriatur ne
        </p>
        <span class="button-small">Call to action</span></a>
    </li>
    <li>
      <a href=""><strong><span>Qui ut mucius fuisset</span></strong>
        <p>
          Apeirian nominati partiendo vel at, qui cu saperet imperdiet necessitatibus. Cu nam integre copiosae lobortis
        </p>
        <span class="button-small">Call to action</span></a>
    </li>
  </ul>
</section>

Buttons

<section class="fullwidth short fixed-background" style="background-image:url('/assets/example/alan_gilbert.jpg');">
  <ul class="pathfinder-3 buttons">
    <li>
      <a href=""><strong><span>Prima vitae</span></strong></a>
    </li>
    <li>
      <a href=""><strong><span>Ex debet</span></strong></a>
    </li>
    <li>
      <a href=""><strong><span>Mucius fuisset</span></strong></a>
    </li>
  </ul>
</section>