diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 1eae3452..96a0b0d8 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -66,20 +66,19 @@ &__body { order: 3; - p { - margin-top: spacing.space(1); + display: flex; + flex-direction: column; - &:first-child { - margin-top: 0; - } + gap: spacing.space(1); + + > * { + margin-top: 0; } } &__actions { display: flex; gap: spacing.space(1) spacing.space(2); - - order: 4; } &__action { @@ -91,8 +90,7 @@ } &--padded &__heading, - &--padded &__body, - &--padded &__actions { + &--padded &__body { padding-right: spacing.space(1); padding-left: spacing.space(1); } @@ -102,11 +100,10 @@ padding-bottom: 0; display: grid; - grid-template: min-content min-content 1fr / 50% 50%; + grid-template: min-content 1fr / 50% 50%; grid-template-areas: "image header" - "image body" - "image footer"; + "image body"; gap: 0; > * + * { @@ -130,8 +127,7 @@ } &--horizontal &__heading, - &--horizontal &__body, - &--horizontal &__actions { + &--horizontal &__body { padding-right: spacing.space(2); padding-left: spacing.space(2); } @@ -152,10 +148,6 @@ &--horizontal &__body { grid-area: body; } - - &--horizontal &__actions { - grid-area: footer; - } } @include colour.on-high-contrast { diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json index c028f34b..48dc1ee3 100644 --- a/src/nationalarchives/components/card/fixtures.json +++ b/src/nationalarchives/components/card/fixtures.json @@ -178,7 +178,7 @@ } ] }, - "html": "

Card title

Card body

Card action
" + "html": "

Card title

Card body

" }, { "name": "with actions with titles", @@ -194,7 +194,7 @@ } ] }, - "html": "

Card title

Card body

Card action
" + "html": "

Card title

Card body

" }, { "name": "with actions with classes", @@ -210,7 +210,7 @@ } ] }, - "html": "

Card title

Card body

Card action
" + "html": "

Card title

Card body

" }, { "name": "with actions with attributes", @@ -228,7 +228,7 @@ } ] }, - "html": "

Card title

Card body

Card action
" + "html": "

Card title

Card body

" }, { "name": "with a label", @@ -345,7 +345,7 @@ } ] }, - "html": "

Card title

Card body

Card action
" + "html": "

Card title

Card body

" }, { "name": "with a different element", diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk index 80c0fe9d..c13b750e 100644 --- a/src/nationalarchives/components/card/template.njk +++ b/src/nationalarchives/components/card/template.njk @@ -64,7 +64,7 @@ {%- endif %} {%- endif %} - {%- if params.meta or params.text or params.body %} + {%- if params.meta or params.text or params.body or params.actions %}
{%- if params.meta %}
@@ -86,15 +86,15 @@ {%- else %} {{ params.body | safe }} {%- endif %} -
- {%- endif %} - {%- if params.actions %} -
- {%- for item in params.actions %} - - {{ item.text }} - - {%- endfor %} + {%- if params.actions %} +
+ {%- for item in params.actions %} + + {{ item.text }} + + {%- endfor %} +
+ {%- endif %}
{%- endif %}