|
1 | 1 | {% load wagtailcore_tags wagtailimages_tags %} |
2 | | -<div class="grid division-signpost"> |
3 | | - <div class="grid__division-signpost"> |
4 | | - {# Section heading #} |
5 | | - {% if value.title %} |
6 | | - <h2 class="heading heading--two">{{ value.title }}</h2> |
7 | | - {% endif %} |
8 | | - {# Section intro #} |
9 | | - {% if value.intro %} |
10 | | - <div class="text text--five division-signpost__intro">{{ value.intro|richtext }}</div> |
11 | | - {% endif %} |
12 | | - {# Signposting cards #} |
13 | | - <ul class="division-signpost__cards"> |
14 | | - {% for card in value.cards %} |
15 | | - <li class="division-signpost__card division-signpost__card--{{ card.card_colour }}"> |
16 | | - <div class="division-signpost__text"> |
17 | | - <h3 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h3> |
18 | | - <div class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</div> |
19 | | - </div> |
20 | | - {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %} |
21 | | - {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #} |
22 | | - <a href="{% pageurl card.page %}" class="button-link button-link--{{ card.card_colour }}">{{ card.link_text }} {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}<span class="sr-only"> about {% firstof card.heading card.page.title %} division</span></a> |
23 | | - </li> |
24 | | - {% endfor %} |
25 | | - </ul> |
26 | | - </div> |
| 2 | +<div class="grid__division-signpost"> |
| 3 | + {# Section heading #} |
| 4 | + {% if value.title %} |
| 5 | + <h2 class="heading heading--two">{{ value.title }}</h2> |
| 6 | + {% endif %} |
| 7 | + {# Section intro #} |
| 8 | + {% if value.intro %} |
| 9 | + <div class="text text--five division-signpost__intro">{{ value.intro|richtext }}</div> |
| 10 | + {% endif %} |
| 11 | + {# Signposting cards #} |
| 12 | + <ul class="division-signpost__cards"> |
| 13 | + {% for card in value.cards %} |
| 14 | + <li class="division-signpost__card division-signpost__card--{{ card.card_colour }}"> |
| 15 | + <div class="division-signpost__text"> |
| 16 | + <h2 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h2> |
| 17 | + <div class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</div> |
| 18 | + </div> |
| 19 | + {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %} |
| 20 | + {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #} |
| 21 | + <a href="{% pageurl card.page %}" class="button-link button-link--{{ card.card_colour }}">{{ card.link_text }} {% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}<span class="sr-only"> about {% firstof card.heading card.page.title %} division</span></a> |
| 22 | + </li> |
| 23 | + {% endfor %} |
| 24 | + </ul> |
27 | 25 | </div> |
| 26 | + |
0 commit comments