Breaker

The Breaker component displays a title, button, summary text, an optional image.
The two variations of the breaker depend on whether an image is uploaded or not. If no image is provided the text and CTA are displayed in the middle of the breaker. When an image is provided, the image is displayed in place of the text and CTA and these are then moved down below the blue background.

Request more Information

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Request more information

Request more Information

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Request more information
Returning students

Request more Information

Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Request more information
Returning students

Request more Information

Sample text
Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Request more information

Request more Information

Visit our new site to see how our faculty and alumni Go Beyond and how you can join us.
Request more information
Markup Details
                            {# Breaker with no image and 1 CTA. #}
<section>
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_no_image.heading,
    "text": item_no_image.text,
    "cta_1": item_no_image.cta_1
  } only %}
</section>

{# Breaker with no image and 2 CTAs. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_no_image.heading,
    "text": item_no_image.text,
    "cta_1": item_no_image.cta_1,
    "cta_2": item_no_image.cta_2
  } only %}
</section>

{# Breaker with image and 2 CTAs. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "image": item_with_image.image,
    "cta_1": item_with_image.cta_1,
    "cta_2": item_with_image.cta_2
  } only %}
</section>

{# Breaker with image and custom background and 1 CTA. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "image": item_with_image.image,
    "background_image_url": item_with_image.background_image_url,
    "cta_1": item_with_image.cta_1
  } only %}
</section>

{# Breaker with video and custom background and 1 CTA. #}
<section style="margin-top: 100px;">
  {% include '@components/breaker/breaker.twig' with {
    "heading": item_with_image.heading,
    "text": item_with_image.text,
    "video": item_with_image.video,
    "background_image_url": item_with_image.background_image_url,
    "cta_1": item_with_image.cta_1
  } only %}
</section>