TWE-2 - FE - Division signpost block #323
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,27 @@ | ||
| {% load wagtailcore_tags wagtailimages_tags %} | ||
| <div class="grid division-signpost"> | ||
| <div class="grid__division-signpost"> | ||
| {# Section heading #} | ||
| {% if value.title %} | ||
| <h2 class="heading heading--two">{{ value.title }}</h2> | ||
| {% endif %} | ||
| {# Section intro #} | ||
| {% if value.intro %} | ||
| <p class="text text--five division-signpost__intro">{{ value.intro|richtext }}</p> | ||
albinazs marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| {% endif %} | ||
| {# Signposting cards #} | ||
| <ul class="division-signpost__cards"> | ||
| {% for card in value.cards %} | ||
| <li class="division-signpost__card division-signpost__card--{{ card.card_colour }}"> | ||
| <div class="division-signpost__text"> | ||
| <h3 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h3> | ||
| <p class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</p> | ||
albinazs marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| </div> | ||
| {% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" class="" alt="" %} | ||
albinazs marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| {# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #} | ||
| <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> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </div> | ||
| </div> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| context: | ||
| value: | ||
| title: Our divisions | ||
| intro: We have three divisions, each with a unique focus and expertise | ||
| cards: | ||
| - card_colour: 'theme-coral' | ||
| heading: Charity | ||
| description: Amplify your impact, reach more supporters and transform your organisation with tailored digital strategies and solutions | ||
| link_text: Find out more | ||
| - card_colour: 'theme-nebuline' | ||
| heading: Public | ||
| description: Navigate complex challenges. Accelerate your mission and transform public services through digital | ||
| link_text: Find out more | ||
| - card_colour: 'theme-lagoon' | ||
| heading: Wagtail CMS services | ||
| description: Empower your editors and developers to do their best work with Wagtail, the world's leading open-source Python CMS. | ||
| link_text: Find out more | ||
|
|
||
| tags: | ||
| srcset_image: | ||
| 'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" class="" alt=""': | ||
| raw: | | ||
| <img alt="" class="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| @use 'config' as *; | ||
|
|
||
| .button-link { | ||
| @include font-size('size-four'); | ||
| @include high-contrast-text-decoration(); | ||
| font-weight: $weight--semibold; | ||
| display: inline-block; | ||
| padding: $spacer-mini-plus $spacer-small; | ||
| text-align: center; | ||
| width: 100%; | ||
| color: var(--color--white); | ||
| transition: background-color $transition-quick; | ||
| // TODO: add default bg color for themed pages var(--color--accent) once color themes BE is ready | ||
|
|
||
| @include reduced-motion() { | ||
| transition: none; | ||
| } | ||
|
|
||
| &:hover { | ||
| color: var(--color--button-link-interaction); | ||
| background-color: var(--color--link-interaction); | ||
| } | ||
|
|
||
| &:focus { | ||
| @include focus-style(); | ||
| } | ||
|
|
||
| &--theme-coral { | ||
| background-color: $color--coral-charity; | ||
| } | ||
|
|
||
| &--theme-nebuline { | ||
| background-color: $color--nebuline-public; | ||
| } | ||
|
|
||
| &--theme-lagoon { | ||
| background-color: $color--lagoon-wagtail; | ||
| } | ||
|
|
||
| &__arrow { | ||
| @include arrow-link-icon-styles( | ||
| $interaction-color: var(--color--button-link-interaction) | ||
| ); | ||
| color: inherit; | ||
| margin-left: $spacer-mini-plus; | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| @use 'config' as *; | ||
|
|
||
| .division-signpost { | ||
| margin-bottom: $spacer-large; | ||
|
|
||
| &__intro { | ||
| margin-bottom: $spacer-medium; | ||
| } | ||
|
|
||
| &__cards { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| flex-direction: column; | ||
| gap: $spacer-mini-plus; | ||
|
|
||
| @include media-query(medium) { | ||
| flex-direction: row; | ||
| } | ||
| } | ||
|
|
||
| &__card { | ||
| flex-basis: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| transition: background-color $transition-quick; | ||
|
|
||
| @include media-query(medium) { | ||
| flex-basis: calc(50% - #{$spacer-mini-plus} * 0.5); | ||
| } | ||
|
|
||
| @include media-query(large) { | ||
| flex-basis: calc(33.33% - ($spacer-mini-plus * 2 / 3)); | ||
| } | ||
|
|
||
| @include high-contrast-mode() { | ||
| border: 1px solid var(--color--text); | ||
| } | ||
|
|
||
| &--theme-coral { | ||
| background-color: var(--color--coral-charity); | ||
|
|
||
| &:has(.button-link:hover) { | ||
|
Member
There was a problem hiding this comment. Praise: This is one of my favourite things to come to CSS recently! So powerful : ) |
||
| background-color: var(--color--coral-30); | ||
| } | ||
| } | ||
|
|
||
| &--theme-nebuline { | ||
| background-color: var(--color--nebuline-public); | ||
|
|
||
| &:has(.button-link:hover) { | ||
| background-color: var(--color--nebuline-30); | ||
| } | ||
| } | ||
|
|
||
| &--theme-lagoon { | ||
| background-color: var(--color--lagoon-wagtail); | ||
|
|
||
| &:has(.button-link:hover) { | ||
| background-color: var(--color--lagoon-30); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__text { | ||
| padding: $spacer-medium $spacer-small $spacer-small; | ||
| margin-bottom: auto; | ||
|
|
||
| @include media-query(large) { | ||
| padding-top: $spacer-medium-plus; | ||
| } | ||
| } | ||
|
|
||
| &__heading { | ||
| color: var(--color--white); | ||
| margin-bottom: $spacer-mini; | ||
| } | ||
|
|
||
| &__description { | ||
| color: var(--color--white); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -56,10 +56,6 @@ | |
| &__arrow { | ||
| @include arrow-link-icon-styles(); | ||
| color: var(--color--heading); | ||
| } | ||
|
|
||
| &__socials { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.