Website: Update case study article template (#37438)

Changes:
- Updated the template page used for case study articles to match the
latest wireframes.
This commit is contained in:
Eric 2025-12-19 10:02:15 -06:00 committed by GitHub
parent 31506bc471
commit 701fc431db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 60 additions and 55 deletions

View file

@ -21,27 +21,27 @@
h3 {
padding-top: 32px;
color: #192147;
/* Title S (FKA h4) */
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 24px; /* 120% */
font-weight: 700;
line-height: 120%;
margin-bottom: 24px;
}
h4 {
color: #192147;
/* Title XS */
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 19.2px; /* 120% */
font-weight: 700;
line-height: 120%;
margin-bottom: 24px;
}
p {
line-height: 150%;
}
[purpose='page-content'] {
max-width: 1072px;
margin-left: auto;
@ -54,7 +54,7 @@
[purpose='article-title-and-quote'] {
max-width: 663px;
margin-bottom: 64px;
margin-bottom: 48px;
}
[purpose='article-title'] {
h1 {
@ -125,6 +125,9 @@
border: 1px solid #E2E4EA;
background: #FFF;
padding: 0 32px 32px 32px;
p {
margin-bottom: 0px;
}
ul {
margin-bottom: 0px;
list-style-type: none;
@ -137,7 +140,7 @@
padding-left: 40px;
text-indent: -40px;
margin-bottom: 0px;
padding-top: 16px;
padding-top: 8px;
padding-bottom: 16px;
}
li::before {
@ -201,22 +204,24 @@
}
[purpose='company-information'] {
h4 {
margin-bottom: 16px;
}
p {
margin-bottom: 40px;
color: #515774;
/* Body MD (FKA p) */
color: #515774;
font-family: Inter;
font-size: 16px;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
[purpose='case-study-links'] {
display: flex;
flex-direction: column;
gap: 4px;
h4 {
padding-top: 16px;// "More Customer stories" link
}
}
[purpose='case-study-link'] {
display: flex;
@ -537,7 +542,7 @@
padding-left: 40px;
text-indent: -40px;
margin-bottom: 0px;
padding-top: 12px;
padding-top: 8px;
padding-bottom: 12px;
&:last-of-type {
margin-bottom: 0px;
@ -677,35 +682,7 @@
padding: 0 24px 16px 24px;
}
[purpose='article-content'] {
[purpose='attribution-quote'] {
text-align: center;
margin: 64px 0px;
&::before {
height: 0px;
background: none;
display: none;
}
&:last-of-type {
margin-bottom: 96px;
}
p:first-of-type {
font-style: italic;
line-height: 150%;
margin-bottom: 16px;
font-size: 16px;
}
p {
font-size: 12px;
margin-bottom: 4px;
}
strong {
color: #515774;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
}
[purpose='attribution-quote'] + h2 {
margin-top: 128px;
}
@ -720,17 +697,14 @@
}
}
[purpose='page-container'] {
padding: 48px 24px;
padding: 48px 32px;
}
[purpose='page-content'] {
max-width: 560px;
}
[purpose='case-study-quote'] {
display: flex;
align-items: center;
padding-top: 48px;
padding-bottom: 64px;
padding-bottom: 48px;
[purpose='quote-author-image'] {
margin-right: 32px;
}
@ -754,6 +728,9 @@
}
p {
margin-bottom: 0px;
&:nth-of-type(2) {
padding-top: 32px;
}
color: #515774;
/* Body MD (FKA p) */
@ -784,6 +761,33 @@
top: 4px;
margin-bottom: 16px;
}
[purpose='attribution-quote'] {
text-align: center;
margin: 64px 0px;
&::before {
left: calc(~'50% - 10.5px');
}
&:last-of-type {
margin-bottom: 96px;
}
p:first-of-type {
font-style: italic;
line-height: 150%;
margin-bottom: 16px;
font-size: 16px;
}
p {
font-size: 12px;
margin-bottom: 4px;
}
strong {
color: #515774;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
}
}
}
@ -800,8 +804,9 @@
[purpose='case-study-quote'] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
align-items: flex-start;
padding-top: 32px;
padding-bottom: 32px;
[purpose='quote-author-image'] {
margin-right: 0px;
margin-bottom: 16px;

View file

@ -42,7 +42,7 @@
<%= thisPage.meta.companyInfoLineTwo %>
</p>
</div>
<div>
<div purpose="case-study-links">
<h4>More customer stories</h4>
<div purpose="case-study-links" >
<a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
@ -111,7 +111,7 @@
<div purpose="bottom-case-study-links" class="d-flex d-md-none flex-column">
<div>
<h4>More customer stories</h4>
<div purpose="case-study-links" >
<div purpose="case-study-links">
<a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
<div purpose="link-image">
<img alt="Foursquare" src="/images/nav-icon-foursquare-40x40@2x.png">