Skip to content

Commit 4084b9a

Browse files
justintempsjustintemps
committed
fix(twig/styles): multilink card image sizing
1 parent d4f2a21 commit 4084b9a

File tree

6 files changed

+84
-52
lines changed

6 files changed

+84
-52
lines changed

‎.changeset/lucky-geckos-glow.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@ilo-org/styles": patch
3+
"@ilo-org/twig": patch
4+
---
5+
6+
**Multilink Card:** This fixes image sizing and spacing within the card so that the image will always appear in a 16x9 box regardless of the orientation. It also adds a white and blue theme that can be used to add different background colors to the card.

‎packages/styles/scss/components/_card.scss

+8-12
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
max-width: var(--max-width);
1515
flex: 1 1 var(--max-width);
1616

17+
* {
18+
@include globaltransition("color, background-color, border-color, opacity");
19+
}
20+
1721
&__size__fluid {
1822
--max-width: 100% !important;
1923
}
@@ -105,15 +109,11 @@
105109
top: 0;
106110
width: 100%;
107111
z-index: 2;
108-
@include globaltransition("color, background-color, border-color, opacity");
109112

110113
&:hover,
111114
&:focus,
112115
&:focus-within {
113116
outline: none;
114-
@include globaltransition(
115-
"color, background-color, border-color, opacity"
116-
);
117117

118118
+ #{$self}--wrap {
119119
#{$self}--eyebrow {
@@ -124,6 +124,10 @@
124124
color: $brand-ilo-blue;
125125
}
126126

127+
#{$self}--image--wrapper {
128+
background-color: var(--ilo-color-blue-ramp);
129+
}
130+
127131
#{$self}--intro {
128132
color: $brand-ilo-blue;
129133
}
@@ -147,13 +151,11 @@
147151
color: $brand-ilo-purple;
148152
@include font-styles("body-small");
149153
margin-bottom: spacing(3);
150-
@include globaltransition("color");
151154

152155
#{$self}--link:hover &,
153156
#{$self}--link:focus &,
154157
#{$self}--link:focus-within & {
155158
color: $brand-ilo-blue;
156-
@include globaltransition("color");
157159
}
158160
}
159161

@@ -170,41 +172,35 @@
170172
"body-small",
171173
"copy"
172174
);
173-
@include globaltransition("color");
174175

175176
#{$self}--link:hover &,
176177
#{$self}--link:focus &,
177178
#{$self}--link:focus-within & {
178179
color: $brand-ilo-blue;
179-
@include globaltransition("color");
180180
}
181181
}
182182

183183
&--intro {
184184
color: $brand-ilo-black;
185185
@include font-styles("body-small");
186-
@include globaltransition("color");
187186
margin-bottom: spacing(8);
188187

189188
#{$self}--link:hover &,
190189
#{$self}--link:focus &,
191190
#{$self}--link:focus-within & {
192191
color: $brand-ilo-blue;
193-
@include globaltransition("color");
194192
}
195193
}
196194

197195
&--date {
198196
color: $brand-ilo-grey-accessible;
199197
@include font-styles("body-small");
200198
@include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
201-
@include globaltransition("color");
202199

203200
#{$self}--link:hover &,
204201
#{$self}--link:focus &,
205202
#{$self}--link:focus-within & {
206203
color: $brand-ilo-blue;
207-
@include globaltransition("color");
208204
}
209205
}
210206

‎packages/styles/scss/components/_multilinkcard.scss

+50-24
Original file line numberDiff line numberDiff line change
@@ -8,34 +8,50 @@
88

99
&__type {
1010
&__multilink {
11+
--standard-spacing: #{spacing(8)};
12+
--narrow-spacing: #{spacing(6)};
1113
// Defaults to standard size
1214
--max-width: #{px-to-rem(536px)};
1315

1416
padding: spacing(6);
1517

1618
#{$self}--image--wrapper {
1719
display: none;
20+
background-color: var(--ilo-color-blue-lighter);
21+
height: 0;
22+
overflow: hidden;
23+
padding-top: 56.25%;
24+
position: relative;
25+
margin-bottom: var(--standard-spacing);
26+
27+
&--inner {
28+
position: absolute;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
height: 100%;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
}
37+
38+
picture,
39+
img {
40+
height: 100%;
41+
width: auto;
42+
}
1843
}
1944

2045
#{$self}--content {
2146
#{$self}--image--wrapper {
2247
display: block;
23-
margin-bottom: spacing(8);
2448
}
2549
}
2650

27-
@include breakpoint("md") {
28-
padding: spacing(10);
29-
}
30-
31-
@include breakpoint("lg") {
32-
padding: spacing(14) spacing(12);
33-
}
34-
3551
#{$self}--title {
3652
@include font-styles("headline-5");
37-
margin-bottom: spacing(8);
38-
color: $brand-ilo-black;
53+
margin-bottom: var(--standard-spacing);
54+
color: var(--ilo-color-gray-charcoal);
3955

4056
@include breakpoint("md") {
4157
@include font-styles("headline-4");
@@ -44,8 +60,8 @@
4460

4561
#{$self}--intro {
4662
@include font-styles("body-small");
47-
margin-bottom: spacing(8);
48-
color: $brand-ilo-black;
63+
margin-bottom: var(--standard-spacing);
64+
color: var(--ilo-color-gray-charcoal);
4965

5066
@include breakpoint("md") {
5167
@include font-styles("base");
@@ -55,7 +71,6 @@
5571
&#{$self}__size {
5672
&__standard {
5773
--max-width: #{px-to-rem(536px)};
58-
5974
padding: spacing(12) spacing(10);
6075
}
6176

@@ -70,21 +85,21 @@
7085
#{$self}--content {
7186
#{$self}--image--wrapper {
7287
display: block;
73-
margin-bottom: spacing(6);
88+
margin-bottom: var(--narrow-spacing);
7489
}
7590
}
7691

7792
#{$self}--title {
7893
@include breakpoint("md") {
7994
@include font-styles("headline-5");
80-
margin-bottom: spacing(6);
95+
margin-bottom: var(--narrow-spacing);
8196
}
8297
}
8398

8499
#{$self}--intro {
85100
@include breakpoint("md") {
86101
@include font-styles("body-small");
87-
margin-bottom: spacing(6);
102+
margin-bottom: var(--narrow-spacing);
88103
}
89104
}
90105
}
@@ -104,23 +119,26 @@
104119

105120
&#{$self}__align__right {
106121
#{$self}--wrap {
107-
flex-direction: row-reverse;
122+
grid-template-areas: "content image";
108123
}
109124
}
110125

111126
#{$self}--wrap {
112-
display: flex;
113-
column-gap: px-to-rem(32px);
127+
display: grid;
128+
grid-template-areas: "image content";
129+
grid-template-columns: 1fr 1fr;
130+
gap: px-to-rem(32px);
114131
}
115132

116133
#{$self}--image--wrapper {
117-
display: block;
118-
width: 50%;
134+
grid-area: image;
135+
display: inline-block;
136+
margin-bottom: 0;
137+
width: 100%;
119138
}
120139

121140
#{$self}--content {
122-
width: 50%;
123-
141+
grid-area: content;
124142
#{$self}--image--wrapper {
125143
display: none;
126144
}
@@ -141,6 +159,14 @@
141159
position: relative;
142160
z-index: 3;
143161
}
162+
163+
@include breakpoint("md") {
164+
padding: spacing(10);
165+
}
166+
167+
@include breakpoint("lg") {
168+
padding: spacing(14) spacing(12);
169+
}
144170
}
145171
}
146172
}

‎packages/twig/public/images/16x9.jpg

206 KB
Loading

‎packages/twig/src/components/card_multilink/card_multilink.component.yml

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ multilinkcard:
2626
loading: "lazy"
2727
url:
2828
- breakpoint: "(min-width: 0px)"
29-
src: "/images/small.jpg"
29+
src: "/images/publication.jpg"
3030
- breakpoint: "(min-width: 800px)"
31-
src: "/images/medium.jpg"
31+
src: "/images/publication.jpg"
3232
- breakpoint: "(min-width: 1200px)"
33-
src: "/images/large.jpg"
33+
src: "/images/publication.jpg"
3434
- breakpoint: "(min-width: 1440px)"
35-
src: "/images/large.jpg"
35+
src: "/images/publication.jpg"
3636
intro:
3737
type: string
3838
label: Intro

‎packages/twig/src/components/card_multilink/card_multilink.twig

+16-12
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@
88
{% endif %}
99
<div class="{{prefix}}--card--wrap">
1010
{% if image %}
11-
<div class="{{prefix}}--card--image--wrapper">
12-
{% include "@components/picture/picture.twig" with {
13-
image: image,
14-
class: "card"
15-
}
16-
%}
11+
<div class="{{prefix}}--card--image--wrapper">
12+
<div class="{{prefix}}--card--image--wrapper--inner">
13+
{% include "@components/picture/picture.twig" with {
14+
image: image,
15+
class: "card"
16+
}
17+
%}
18+
</div>
1719
</div>
18-
{% endif %}
20+
{% endif %}
1921
<div class="{{prefix}}--card--content">
2022
{% if eyebrow %}
2123
<p class="{{prefix}}--card--eyebrow">{{eyebrow}}</p>
@@ -25,11 +27,13 @@
2527
{% endif %}
2628
{% if image %}
2729
<div class="{{prefix}}--card--image--wrapper">
28-
{% include "@components/picture/picture.twig" with {
29-
image: image,
30-
class: "card"
31-
}
32-
%}
30+
<div class="{{prefix}}--card--image--wrapper--inner">
31+
{% include "@components/picture/picture.twig" with {
32+
image: image,
33+
class: "card"
34+
}
35+
%}
36+
</div>
3337
</div>
3438
{% endif %}
3539
{% if intro %}

0 commit comments

Comments
 (0)