src/app/legacy/containers/Headings/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Headings in the middle of articles should render correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<strong
class="emotion-2 emotion-3"
>
Sample headline
</strong>
</div>
</div>
`;
exports[`Headings with headline data should render correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
This is a headline!
</h1>
</div>
</div>
`;
exports[`Headings with plain text headline should render h1 containing correct text 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
Plain headline
</h1>
</div>
</div>
`;
exports[`Headings with plain text subheadline should render h2 containing correct text 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
color: #141414;
margin: 0;
padding: 1.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding-top: 2rem;
}
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h2
class="emotion-2 emotion-3"
id="Plain-subheadline"
tabindex="-1"
>
Plain subheadline
</h2>
</div>
</div>
`;
exports[`Headings with rich text headline with bold text should render h1 with <b> tag 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
<b>
All is bold
</b>
</h1>
</div>
</div>
`;
exports[`Headings with rich text headline with italic text should render h1 with <i> tag 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
.emotion-4 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
<i
class="emotion-4 emotion-5"
>
All is italic
</i>
</h1>
</div>
</div>
`;
exports[`Headings with rich text should render headline with bold & italic text should render h1 with <b><i> tags 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
.emotion-4 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
<i
class="emotion-4 emotion-5"
>
<b>
All is bold and italic
</b>
</i>
</h1>
</div>
</div>
`;
exports[`Headings with rich text should render headline with italic & bold text should render h1 with <b><i> tags 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
.emotion-4 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
<b>
<i
class="emotion-4 emotion-5"
>
All is italic and bold
</i>
</b>
</h1>
</div>
</div>
`;
exports[`Headings with rich text with different attributes should render headline with only middle of text italic should render correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 16.666666666666668%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 33.333333333333336%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(12, 1fr);
grid-column-end: span 12;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.75rem;
line-height: 2rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
color: #141414;
display: block;
margin: 0;
padding: 2rem 0;
overflow-wrap: anywhere;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2.75rem;
line-height: 3rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 2.5rem 0;
}
}
.emotion-2:focus {
outline: none;
}
.emotion-4 {
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h1
class="emotion-2 emotion-3"
id="content"
tabindex="-1"
>
This is
<i
class="emotion-4 emotion-5"
>
very
</i>
important
</h1>
</div>
</div>
`;
exports[`Headings with subheadline data should render correctly 1`] = `
@media (max-width: 14.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-0 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-0 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 0.5rem;
grid-column-start: 1;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-0 {
grid-template-columns: repeat(6, 1fr);
grid-column-end: span 6;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
padding: 0 1rem;
grid-column-start: 1;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-0 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-0 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-2 {
font-size: 1.25rem;
line-height: 1.5rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
color: #141414;
margin: 0;
padding: 1.5rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-2 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding-top: 2rem;
}
}
<div>
<div
class="emotion-0 emotion-1"
dir="ltr"
>
<h2
class="emotion-2 emotion-3"
id="This-is-a-subheadline"
tabindex="-1"
>
This is a subheadline
</h2>
</div>
</div>
`;