No notes defined.
<ol class="accordion list--steps list--steps-accent-pink">
<li>
<details class="accordion__item" open>
<summary class="accordion__title">
<h2 class="accordion__toggle">Take Action</h2>
</summary>
<div class="accordion__content">
<div class="list--steps__content">
<p>If you are at home, in University-managed residences, or in shared private accommodation when you experience COVID-19 symptoms, stay there and do not come onto campus. If you are on campus, make sure you maintain two-metre social distancing, wear your face covering, apply hand gel and
head home immediately.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Check your symptoms</a>
</div>
</div>
</details>
</li>
<li>
<details class="accordion__item">
<summary class="accordion__title">
<h2 class="accordion__toggle">Start Isolating</h2>
</summary>
<div class="accordion__content">
<div class="">
<p>If you have symptoms, you must immediately self-isolate. Email your tutor to let them know that you will not be able to attend your face-to-face classes. You can visit the NHS website for more information in how to self-isolate.</p>
</div><a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>
</div>
</details>
</li>
<li>
<details class="accordion__item">
<summary class="accordion__title">
<h2 class="accordion__toggle">Book a Test</h2>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p><a href="" class="button">Call to action</a>
</div>
</details>
</li>
<li>
<details class="accordion__item">
<summary class="accordion__title">
<h2 class="accordion__toggle">Following a positive result</h2>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p><a href="" class="button">Call to action</a>
</div>
</details>
</li>
<li>
<details class="accordion__item">
<summary class="accordion__title">
<h2 class="accordion__toggle">Alert the University</h2>
</summary>
<div class="accordion__content">
<p>Some content inside</p>
<p>Some content</p><a href="" class="button">Call to action</a>
</div>
</details>
</li>
</ol>
<ol class="accordion list--steps list--steps-accent-pink">
<li>
{% include '@accordion--item' with {
titleElement: 'h2',
title: 'Take Action',
content: '
<div class="list--steps__content">
<p>If you are at home, in University-managed residences, or in shared private accommodation when you experience COVID-19 symptoms, stay there and do not come onto campus. If you are on campus, make sure you maintain two-metre social distancing, wear your face covering, apply hand gel and
head home immediately.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Check your symptoms</a>
</div>',
open: true
} %}
</li>
<li>
{% include '@accordion--item' with {
titleElement: 'h2',
title: 'Start Isolating',
content: '<div class=""><p>If you have symptoms, you must immediately self-isolate. Email your tutor to let them know that you will not be able to attend your face-to-face classes. You can visit the NHS website for more information in how to self-isolate.</p></div><a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>'
} %}
</li>
<li>
{% include '@accordion--item' with {
titleElement: 'h2',
title: 'Book a Test',
content: '<p>Some content inside</p><p>Some content</p><a href="" class="button">Call to action</a>'
} %}
</li>
<li>
{% include '@accordion--item' with {
titleElement: 'h2',
title: 'Following a positive result',
content: '<p>Some content inside</p><p>Some content</p><a href="" class="button">Call to action</a>'
} %}
</li>
<li>
{% include '@accordion--item' with {
titleElement: 'h2',
title: 'Alert the University',
content: '<p>Some content inside</p><p>Some content</p><a href="" class="button">Call to action</a>'
} %}
</li>
</ol>
// See also: fusion with list--steps in _lists.scss
.accordion {
clear: both;
margin-bottom: $spacing-4xl;
border-bottom: 1px solid $grey--light;
}
.accordion__item {
border-top: 1px solid $grey--light;
&[open] {
.accordion__title {
font-weight: 500;
background: $greyblue--superlight;
}
.accordion__toggle:before {
content: '';
transform: rotate(0deg);
background: $neutral--primary url('#{$image-theme-directory-icon}/icon-minus-white.svg') no-repeat center center;
background-size: 50%;
}
}
}
.accordion__title {
display: block;
margin: 0;
padding: $spacing-lg $spacing-sm;
font-weight: normal;
@include line-height('headings');
list-style: none;
cursor: pointer;
&:focus {
outline: 0.1em solid rgba($neutral--primary, 0.5);
}
&::-webkit-details-marker {
display: none;
}
@media (min-width: 40em) {
padding: $spacing-lg $spacing-lg;
}
}
.accordion__toggle {
display: block;
padding-left: 1.5em;
color: $dark-blue;
&:before {
display: inline-block;
float: left;
content: '';
width: 1em;
height: 1em;
line-height: 1;
padding: 0;
margin-left: -1.5em;
background: $neutral--primary url('#{$image-theme-directory-icon}/icon-plus-white.svg') no-repeat center center;
background-size: 50%;
text-align: center;
border-radius: 50%;
vertical-align: middle;
box-sizing: border-box;
}
}
.accordion__content {
padding: $spacing-sm;
background: $greyblue--supersuperlight;
border-top: 1px solid $grey--light;
@media (min-width: 40em) {
padding: $spacing-lg $spacing-lg;
}
}
.accordion--transparent {
& .accordion__item[open] .accordion__title {
background: none;
}
& .accordion__content {
background: none;
border-top: 0;
}
}