ws-nextjs-app/pages/[service]/live/[id]/__snapshots__/live.test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Live Page creates snapshot of the live page 1`] = `
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
@media screen and (forced-colors: active) {
.emotion-0 {
border-bottom: solid 0.0625rem transparent;
}
}
.emotion-1 {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}
.emotion-2 {
background-color: #141414;
width: 100%;
top: 0;
bottom: 0;
position: absolute;
}
@media (min-width: 63rem) {
.emotion-3 {
max-width: 80rem;
margin: 0 auto;
position: relative;
width: 100%;
}
}
.emotion-4 {
position: relative;
padding: 1rem 0.5rem;
max-width: 80rem;
margin: 0 auto;
}
@media (min-width: 25rem) {
.emotion-4 {
padding: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-4 {
padding-top: 1.5rem;
padding-bottom: 2rem;
}
}
.emotion-5 {
color: #141414;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
margin: 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-5 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-5 {
font-size: 2rem;
line-height: 2.25rem;
}
}
.emotion-6 {
display: block;
color: #FEFEFE;
margin-top: 1rem;
}
@media (max-width: 14.9375rem) {
.emotion-6 {
margin-top: 0.5rem;
}
}
@media (min-width: 63rem) {
.emotion-6 {
width: calc(100% / 3 * 2);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
margin-top: 0;
}
}
@media (min-width: 80rem) {
.emotion-6 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 75%;
}
}
.emotion-7 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
color: #F6F6F6;
margin: 0;
margin-top: 1rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-7 {
font-size: 1rem;
line-height: 1.25rem;
}
}
.emotion-8 {
max-width: 80rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
padding: 0.5rem 0.5rem;
}
@media (min-width: 25rem) {
.emotion-8 {
padding: 1rem;
}
}
@media (min-width: 63rem) {
.emotion-8 {
-webkit-padding-start: 1rem;
padding-inline-start: 1rem;
-webkit-padding-end: 1rem;
padding-inline-end: 1rem;
padding-top: 0.5rem;
padding-bottom: 2rem;
-webkit-column-gap: 1rem;
column-gap: 1rem;
}
}
.emotion-9 {
grid-column: 1/13;
}
@media (min-width: 63rem) {
.emotion-9 {
grid-column: 1/5;
}
}
@media (min-width: 80rem) {
.emotion-9 {
grid-column: 1/4;
}
}
.emotion-10 {
color: #141414;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
margin: 0;
padding: 0.5rem 0 1rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-10 {
padding-top: 0;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.125rem;
line-height: 1.375rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-10 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-10 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
}
@media (min-width: 63rem) {
.emotion-10 {
padding-top: 1rem;
}
}
.emotion-11 {
color: #141414;
background-color: #F6F6F6;
border: solid 0.1875rem transparent;
padding: 1rem 0.5rem 1rem;
}
@media (min-width: 25rem) {
.emotion-11 {
padding: 1rem 0 1rem;
}
}
@media (min-width: 63rem) {
.emotion-11 {
padding: 1rem 1rem 1rem;
}
}
.emotion-11 li {
-webkit-padding-start: 0.1875rem;
padding-inline-start: 0.1875rem;
}
.emotion-11 li:last-child {
margin-bottom: 0;
}
.emotion-11 ul {
-webkit-padding-start: 1rem;
padding-inline-start: 1rem;
margin-bottom: 0;
}
.emotion-11 p {
padding-bottom: 0;
}
.emotion-11 a {
color: #141414;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
border-bottom: 0.0625rem solid #141414;
}
.emotion-11 a:visited {
color: #545658;
}
.emotion-13 {
margin-bottom: 1.5rem;
}
@media (max-width: 14.9375rem) {
.emotion-13 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-13 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-13 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-13 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-13 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-13 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-13 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-13 {
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-13 {
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-13 {
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-13 {
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-13 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-13 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-15 {
margin-top: 0;
list-style-type: none;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.emotion-15>li {
position: relative;
color: inherit;
}
.emotion-15>li::before {
top: 0.5rem;
content: "";
position: absolute;
border-width: 1rem;
inset-inline-start: -1rem;
}
.emotion-15>li::before {
border: 0.1875rem solid #141414;
background-color: #141414;
border-radius: 0;
}
.emotion-16 {
margin-bottom: 1rem;
}
.emotion-19 {
color: #222222;
border-bottom: 1px solid #B80000;
-webkit-text-decoration: none;
text-decoration: none;
}
.emotion-19:visited {
color: #6E6E73;
border-bottom: 1px solid #6E6E73;
}
.emotion-19:focus,
.emotion-19:hover {
border-bottom: 2px solid #B80000;
color: #B80000;
}
.emotion-21 {
grid-column: 1/13;
}
@media (min-width: 63rem) {
.emotion-21 {
grid-column: 5/13;
}
}
@media (min-width: 80rem) {
.emotion-21 {
grid-column: 4/10;
}
}
.emotion-22 {
color: #141414;
font-size: 1.25rem;
line-height: 1.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
margin: 0;
padding: 1rem 0 1rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-22 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 37.5rem) {
.emotion-22 {
font-size: 2rem;
line-height: 2.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-22 {
font-size: 1.125rem;
line-height: 1.375rem;
padding-top: 1.5rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-22 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-22 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
}
@media (min-width: 63rem) {
.emotion-22 {
padding-top: 1rem;
}
}
.emotion-23 {
color: #141414;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
padding-bottom: 1rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-23 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-23 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-23 {
padding-bottom: 1.5rem;
}
}
.emotion-24 {
margin-block: 0;
padding-inline: 0;
}
.emotion-25 {
list-style-type: none;
}
.emotion-26 {
background-color: #F6F6F6;
margin: 0 0 1rem;
}
@media (min-width: 25rem) {
.emotion-26 {
margin: 0 0 1.5rem;
}
}
@media (min-width: 63rem) {
.emotion-26 {
margin: 0 0 1rem;
}
}
@media screen and (forced-colors: active) {
.emotion-26 {
border: solid 0.1875rem transparent;
border-top: solid 0.0625rem transparent;
}
}
.emotion-27 {
color: #141414;
font-size: 1.125rem;
line-height: 1.375rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
margin: 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-27 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-27 {
font-size: 1.5rem;
line-height: 1.75rem;
}
}
@media (min-width: 15rem) {
.emotion-27 {
line-height: 0;
}
}
.emotion-28 {
border-top: solid 0.125rem #B80000;
display: inline-block;
width: 100%;
background-color: #B80000;
}
@media screen and (forced-colors: active) {
.emotion-28 {
border-bottom: solid 0.1875rem transparent;
}
}
.emotion-29 {
font-size: 0.875rem;
line-height: 1.125rem;
color: #545658;
display: block;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #FFFFFF;
font-size: 0.875rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
padding: 0.25rem 0.75rem;
background-color: #B80000;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-29 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-29 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-29 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-29 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-31 {
color: #141414;
font-size: 0.875rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
color: #FFFFFF;
background-color: #B80000;
padding: 0.25rem 0.75rem;
display: inline-block;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-31 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-31 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
.emotion-32 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-33 {
color: #141414;
font-size: 1.125rem;
line-height: 1.375rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
color: #000000;
display: inline-block;
width: 100%;
margin: 0;
padding: 1.5rem 1rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-33 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-33 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
.emotion-34 {
padding: 1rem 0.5rem 0.5rem;
}
@media (min-width: 25rem) {
.emotion-34 {
padding: 1rem 0 0.5rem 0;
}
}
@media (min-width: 63rem) {
.emotion-34 {
padding: 1rem 1rem 0.5rem;
}
}
@media (max-width: 14.9375rem) {
.emotion-35 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-35 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-35 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-35 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-35 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-35 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-35 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-35 {
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-35 {
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-35 {
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-35 {
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-35 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-35 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-37 {
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
color: #141414;
padding-bottom: 1.5rem;
margin: 0;
color: #000000;
margin: 0;
padding-bottom: 1rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-37 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-37 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 63rem) {
.emotion-37 {
padding-right: 2.5rem;
}
}
.emotion-37 ul {
padding-bottom: 1rem;
-webkit-padding-start: 1.5rem;
padding-inline-start: 1.5rem;
}
@media (min-width: 63rem) {
.emotion-37 ul {
padding-bottom: 0;
}
}
.emotion-37 li {
margin-bottom: 0.5rem;
}
.emotion-37 li:last-child {
margin-bottom: 0;
}
.emotion-42 {
border-top: solid 0.125rem #B80000;
display: inline-block;
width: 100%;
}
@media screen and (forced-colors: active) {
.emotion-42 {
border-bottom: solid 0.1875rem transparent;
}
}
.emotion-59 {
color: #141414;
font-size: 0.875rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
color: #000000;
display: inline-block;
width: 100%;
margin: 0;
padding: 0.25rem 1rem 0;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-59 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-59 {
font-size: 0.8125rem;
line-height: 1rem;
}
}
@media (min-width: 37.5rem) {
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-59 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-59 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
}
.emotion-65 {
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: italic;
font-family: inherit;
font-weight: inherit;
}
.emotion-68 {
margin-bottom: 1.5rem;
color: #000000;
margin: 0;
padding-bottom: 1rem;
}
@media (max-width: 14.9375rem) {
.emotion-68 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 15rem) and (max-width: 24.9375rem) {
.emotion-68 {
padding: 0 0.5rem;
margin-left: 0%;
}
}
@media (min-width: 25rem) and (max-width: 37.4375rem) {
.emotion-68 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-68 {
padding: 0 1rem;
margin-left: 0%;
}
}
@media (min-width: 63rem) and (max-width: 79.9375rem) {
.emotion-68 {
margin-left: 20%;
}
}
@media (min-width: 80rem) {
.emotion-68 {
margin-left: 40%;
}
}
@supports (display: grid) {
.emotion-68 {
display: block;
width: initial;
margin: 0;
}
@media (max-width: 14.9375rem) {
.emotion-68 {
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-68 {
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-68 {
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-68 {
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-68 {
grid-template-columns: repeat(5, 1fr);
grid-column-end: span 5;
grid-column-start: 2;
}
}
@media (min-width: 80rem) {
.emotion-68 {
grid-template-columns: repeat(10, 1fr);
grid-column-end: span 10;
grid-column-start: 5;
}
}
}
.emotion-68 ul {
padding-bottom: 1rem;
-webkit-padding-start: 1.5rem;
padding-inline-start: 1.5rem;
}
@media (min-width: 63rem) {
.emotion-68 ul {
padding-bottom: 0;
}
}
.emotion-68 li {
margin-bottom: 0.5rem;
}
.emotion-68 li:last-child {
margin-bottom: 0;
}
.emotion-70 {
margin-top: 0;
list-style-type: none;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 400;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-70 {
font-size: 1rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-70 {
font-size: 1rem;
line-height: 1.375rem;
}
}
.emotion-70>li {
position: relative;
color: inherit;
}
.emotion-70>li::before {
top: 0.5rem;
content: "";
position: absolute;
border-width: 1rem;
inset-inline-start: -1rem;
}
.emotion-70>li::before {
border: 0.1875rem solid #3F3F42;
background-color: #3F3F42;
border-radius: 50%;
}
<div>
<noscript />
<main>
<div
class="emotion-0"
>
<div
class="emotion-1"
>
<div
class="emotion-2"
/>
</div>
<div
class="emotion-3"
>
<div
class="emotion-4"
>
<h1
class="emotion-5"
id="content"
tabindex="-1"
>
<span
class="emotion-6"
>
Israeli tanks shell Jabalia camp as heavy fighting continues in north Gaza
</span>
</h1>
<p
class="emotion-7"
>
The refugee camp has been hit by hundreds of shells, where Hamas says 100,000 people are still sheltering
</p>
</div>
</div>
</div>
<div
class="emotion-8"
>
<div
class="emotion-9"
>
<section
aria-label="Summary"
data-e2e="key-points"
role="region"
>
<h2
class="emotion-10"
>
Summary
</h2>
<div
class="emotion-11"
>
<div
class="emotion-12 emotion-13 emotion-14"
dir="ltr"
>
<ul
class="emotion-15"
role="list"
>
<li
class="emotion-16"
role="listitem"
>
I am the summary box
</li>
<li
class="emotion-16"
role="listitem"
>
I need to include bulletpoints
</li>
<li
class="emotion-16"
role="listitem"
>
I want to
<a
class="focusIndicatorReducedWidth emotion-19 emotion-20"
href="/pidgin"
>
link to somebody
</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<div
class="emotion-21"
>
<div>
<h2
class="emotion-22"
>
Live Coverage
</h2>
<p
class="emotion-23"
data-testid="live-contributors"
>
Not a random dude
</p>
<ol
class="emotion-24"
role="list"
>
<li
class="emotion-25"
>
<article
class="emotion-26"
>
<h3
class="emotion-27"
id="asset:2aa3edd0-abe6-4cf3-a2fe-a1a5e98aa71e"
tabindex="-1"
>
<span
role="text"
>
<span
class="emotion-28"
>
<time
class="emotion-29 emotion-30"
datetime="09 May 2023"
>
9 May 2023
</time>
<span
class="emotion-31"
data-testid="breaking-news-label"
>
Breaking
</span>
<span
class="emotion-32"
>
,
</span>
</span>
<span
class="headingStyling emotion-33"
>
Breaking news
</span>
</span>
</h3>
<div
class="emotion-34"
>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
>
Breaking news
</p>
</div>
</div>
</article>
</li>
<li
class="emotion-25"
>
<article
class="emotion-26"
>
<h3
class="emotion-27"
id="asset:7cfd060e-d8e0-4364-b177-31d58ae0c062"
tabindex="-1"
>
<span
role="text"
>
<span
class="emotion-42"
>
<time
class="emotion-29 emotion-30"
datetime="09 May 2023"
>
9 May 2023
</time>
</span>
<span
class="headingStyling emotion-33"
>
Published 6.07pm Tues 9th
</span>
</span>
</h3>
<div
class="emotion-34"
>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
>
Timestamp test
</p>
</div>
</div>
</article>
</li>
<li
class="emotion-25"
>
<article
class="emotion-26"
>
<h3
class="emotion-27"
id="asset:1009a4c7-ef57-4d77-a0f7-3ef886baee4c"
tabindex="-1"
>
<span
role="text"
>
<span
class="emotion-42"
>
<time
class="emotion-29 emotion-30"
datetime="21 March 2023"
>
21 March 2023
</time>
</span>
<span
class="headingStyling emotion-33"
>
Another post
</span>
<span
class="emotion-32"
>
,
</span>
<span
class="headingStyling emotion-59"
>
Another post sub headline
</span>
</span>
</h3>
<div
class="emotion-34"
>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
>
<b>
Another
</b>
<i
class="emotion-65 emotion-66"
>
short form text
</i>
</p>
</div>
<div
class="postStyles emotion-12 emotion-68 emotion-14"
dir="ltr"
>
<ul
class="emotion-70"
role="list"
>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
one
</i>
</li>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
two
</i>
</li>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
three
</i>
</li>
</ul>
</div>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
/>
</div>
<div
class="postStyles emotion-12 emotion-68 emotion-14"
dir="ltr"
>
<ul
class="emotion-70"
role="list"
>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
Bullet 1
</i>
</li>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
Bullet 2
</i>
</li>
<li
class="emotion-16"
role="listitem"
>
<i
class="emotion-65 emotion-66"
>
Bullet 3
</i>
</li>
</ul>
</div>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
/>
</div>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
>
Here is a
<a
class="focusIndicatorReducedWidth emotion-19 emotion-20"
href="/new/pidgin"
>
Link
</a>
</p>
</div>
</div>
</article>
</li>
<li
class="emotion-25"
>
<article
class="emotion-26"
>
<h3
class="emotion-27"
id="asset:5a8d509c-fb87-4763-90ed-1e63a70c30a2"
tabindex="-1"
>
<span
role="text"
>
<span
class="emotion-42"
>
<time
class="emotion-29 emotion-30"
datetime="21 March 2023"
>
21 March 2023
</time>
</span>
<span
class="headingStyling emotion-33"
>
Post headline
</span>
<span
class="emotion-32"
>
,
</span>
<span
class="headingStyling emotion-59"
>
Post sub headline
</span>
</span>
</h3>
<div
class="emotion-34"
>
<div
class="emotion-35 emotion-14"
dir="ltr"
>
<p
class="postStyles emotion-37 emotion-38"
dir="ltr"
>
Some short form text
</p>
</div>
</div>
</article>
</li>
</ol>
</div>
</div>
</div>
</main>
</div>
`;