Skip to content

Commit

Permalink
Added an example for the 50-50-full-width-image hero pattern without …
Browse files Browse the repository at this point in the history
…the subtitle_text
  • Loading branch information
muhammad-ali-pk committed Dec 20, 2024
1 parent 6a3da17 commit 7cd149a
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
1 change: 1 addition & 0 deletions templates/docs/examples/patterns/hero/combined.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<section>{% include 'docs/examples/patterns/hero/hero-signpost-full-width-image.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-50-50.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-50-50-full-width-image.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-50-50-full-width-image-without-subtitle_text.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-50-50-split-on-medium.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-75-25.html' %}</section>
<section>{% include 'docs/examples/patterns/hero/hero-fallback.html' %}</section>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{% extends "_layouts/examples.html" %}
{% from "_macros/vf_hero.jinja" import vf_hero %}

{% block title %}Hero / 50/50 / Full width image{% endblock %}
{% block standalone_css %}patterns_all{% endblock %}

{% set is_paper = true %}
{% block content %}

{% call(slot) vf_hero(
title_text='H1 - ideally one line, up to two',
layout='50/50-full-width-image'
) -%}
{%- if slot == 'description' -%}
<p>
Generally, the height of the right hand side of a 50/50 split should contain more content than the left
hand side.
</p>
{%- endif -%}
{%- if slot == 'cta' -%}
<a href="#" class="p-button--positive">Learn more</a>
<a href="#">Contact us ›</a>
{%- endif -%}
{%- if slot == 'image' -%}
<div class="p-image-container--cinematic is-cover">
<img class="p-image-container__image" src="https://assets.ubuntu.com/v1/a299c914-GettyImages-DataCenter.jpeg" alt="">
</div>
{% endif -%}
{% endcall -%}

{% endblock %}

0 comments on commit 7cd149a

Please sign in to comment.