Undergraduate study

Study at York and you'll graduate with more than a qualification.

Find a course Book an open day

<figure class="c-hero">
  <div class="c-hero-background" style="background-image:url('/media/stained-glass-1900x1000.jpg');">
    <div class="c-hero__content c-figure__content--bottom-centre">
      <div class="c-hero__caption  c-figure__caption--bottom-centre">
        <div class="o-grid">
          <div class="o-grid__row">
            <div class="o-grid__box o-grid__box--half">
              <h1>Undergraduate study</h1>
              <p>Study at York and you'll graduate with more than a qualification.</p>
              <p><a href="#" class="c-btn c-btn--medium">Find a course <i class="c-icon c-icon--search c-icon-after"></i> </a><a href="#" class="c-btn c-btn--medium">Book an open day</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</figure>

A Hero will stretch an image to the full width of the screen. The caption will be centred at the bottom of the c-hero container.

Options

Atoms

  • Hero
    • image: the URL of an image (required)
    • content:
      • text: the text to appear in the caption (string) (required)
      • cta: text to be used on the cta button
      • href: target URL for the cta button