No notes defined.
<ol class="list--steps">
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Take Action</h2>
</div>
<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>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Start Isolating</h2>
</div>
<div class="list--steps__content">
<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>
<div class="list--steps__cta">
<a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Book a test</h2>
</div>
<div class="list--steps__content">
<p>Call 119, or visit the official UK Government website to book or order your test. If your test result is negative, as long as you feel well and have not been told to isolate by NHS test and trace, you no longer have to isolate.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Book your test</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Following a positive result</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, keep isolating for at least 10 days from when your symptoms started. Your household and other contacts must self-isolate for 10 days from when you start self-isolating. After your isolation, you can come back to campus if you do not have any symptoms, or you
just
have a cough or changes to your sense of smell or taste – these can last for weeks after the infection has gone. If you have not had symptoms, the 10 days starts from when you had the test. If you get symptoms after your test, self-isolate for a further 10 days from when your symptoms
start.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">See NHS Guidance</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Alert the University</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, or you need to isolate because someone in your household is positive or showing symptoms, you need to let us know by completing our declaration form. Once you have completed the online form the COVID-19 Support and Response Team will contact you to offer
information, advice, guidance and support. If you’re isolating within University accommodation, we can help to organise food and other essential resources so you don’t have to leave your accommodation.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Declaration form</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Alert Test and Trace</h2>
</div>
<div class="list--steps__content">
<p>If your test result is positive, you also need to share your contacts via the NHS Test and Trace app.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Download the App</a>
</div>
</div>
</li>
</ol>
<hr />
<ol class="list--steps list--steps-accent-maroon">
<li>
<div class="list--steps__title title">
<h2 class="h4">Pick an accent colour</h2>
</div>
<div class="list--steps__content">
<ul>
<li><code>list--steps-accent-red</code></li>
<li><code>list--steps-accent-pink</code></li>
<li><code>list--steps-accent-maroon</code></li>
<li><code>list--steps-accent-slate</code></li>
</ul>
</div>
<div class="list--steps__cta">
<a href="" class="button">Add accessible link text</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Start Isolating</h2>
</div>
<div class="list--steps__content">
<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>
<div class="list--steps__cta">
<a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Book a test</h2>
</div>
<div class="list--steps__content">
<p>Call 119, or visit the official UK Government website to book or order your test. If your test result is negative, as long as you feel well and have not been told to isolate by NHS test and trace, you no longer have to isolate.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Book your test</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Following a positive result</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, keep isolating for at least 10 days from when your symptoms started. Your household and other contacts must self-isolate for 10 days from when you start self-isolating. After your isolation, you can come back to campus if you do not have any symptoms, or you
just
have a cough or changes to your sense of smell or taste – these can last for weeks after the infection has gone. If you have not had symptoms, the 10 days starts from when you had the test. If you get symptoms after your test, self-isolate for a further 10 days from when your symptoms
start.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">See NHS Guidance</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Alert the University</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, or you need to isolate because someone in your household is positive or showing symptoms, you need to let us know by completing our declaration form. Once you have completed the online form the COVID-19 Support and Response Team will contact you to offer
information, advice, guidance and support. If you’re isolating within University accommodation, we can help to organise food and other essential resources so you don’t have to leave your accommodation.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Declaration form</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Alert Test and Trace</h2>
</div>
<div class="list--steps__content">
<p>If your test result is positive, you also need to share your contacts via the NHS Test and Trace app.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Download the App</a>
</div>
</li>
</ol>
<ol class="list--steps">
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Take Action</h2>
</div>
<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>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Start Isolating</h2>
</div>
<div class="list--steps__content">
<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>
<div class="list--steps__cta">
<a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Book a test</h2>
</div>
<div class="list--steps__content">
<p>Call 119, or visit the official UK Government website to book or order your test. If your test result is negative, as long as you feel well and have not been told to isolate by NHS test and trace, you no longer have to isolate.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Book your test</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Following a positive result</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, keep isolating for at least 10 days from when your symptoms started. Your household and other contacts must self-isolate for 10 days from when you start self-isolating. After your isolation, you can come back to campus if you do not have any symptoms, or you
just
have a cough or changes to your sense of smell or taste – these can last for weeks after the infection has gone. If you have not had symptoms, the 10 days starts from when you had the test. If you get symptoms after your test, self-isolate for a further 10 days from when your symptoms
start.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">See NHS Guidance</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Alert the University</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, or you need to isolate because someone in your household is positive or showing symptoms, you need to let us know by completing our declaration form. Once you have completed the online form the COVID-19 Support and Response Team will contact you to offer
information, advice, guidance and support. If you’re isolating within University accommodation, we can help to organise food and other essential resources so you don’t have to leave your accommodation.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Declaration form</a>
</div>
</div>
</li>
<li>
<div class="list--steps__box">
<div class="list--steps__title title">
<h2>Alert Test and Trace</h2>
</div>
<div class="list--steps__content">
<p>If your test result is positive, you also need to share your contacts via the NHS Test and Trace app.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Download the App</a>
</div>
</div>
</li>
</ol>
<hr/>
<ol class="list--steps list--steps-accent-maroon">
<li>
<div class="list--steps__title title">
<h2 class="h4">Pick an accent colour</h2>
</div>
<div class="list--steps__content">
<ul>
<li><code>list--steps-accent-red</code></li>
<li><code>list--steps-accent-pink</code></li>
<li><code>list--steps-accent-maroon</code></li>
<li><code>list--steps-accent-slate</code></li>
</ul>
</div>
<div class="list--steps__cta">
<a href="" class="button">Add accessible link text</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Start Isolating</h2>
</div>
<div class="list--steps__content">
<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>
<div class="list--steps__cta">
<a href="" class="button">Find out more <span class="visually-hidden">about isolating</span></a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Book a test</h2>
</div>
<div class="list--steps__content">
<p>Call 119, or visit the official UK Government website to book or order your test. If your test result is negative, as long as you feel well and have not been told to isolate by NHS test and trace, you no longer have to isolate.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Book your test</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Following a positive result</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, keep isolating for at least 10 days from when your symptoms started. Your household and other contacts must self-isolate for 10 days from when you start self-isolating. After your isolation, you can come back to campus if you do not have any symptoms, or you
just
have a cough or changes to your sense of smell or taste – these can last for weeks after the infection has gone. If you have not had symptoms, the 10 days starts from when you had the test. If you get symptoms after your test, self-isolate for a further 10 days from when your symptoms
start.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">See NHS Guidance</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Alert the University</h2>
</div>
<div class="list--steps__content">
<p>If your result is positive, or you need to isolate because someone in your household is positive or showing symptoms, you need to let us know by completing our declaration form. Once you have completed the online form the COVID-19 Support and Response Team will contact you to offer
information, advice, guidance and support. If you’re isolating within University accommodation, we can help to organise food and other essential resources so you don’t have to leave your accommodation.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Declaration form</a>
</div>
</li>
<li>
<div class="list--steps__title title">
<h2 class="h4">Alert Test and Trace</h2>
</div>
<div class="list--steps__content">
<p>If your test result is positive, you also need to share your contacts via the NHS Test and Trace app.</p>
</div>
<div class="list--steps__cta">
<a href="" class="button">Download the App</a>
</div>
</li>
</ol>
.list--unbulleted,
.list--unstyled {
list-style: none;
padding-left: 0;
}
.list--spaced {
> li {
margin-bottom: $spacing-lg;
}
}
.list--inline {
padding: 0;
li {
display: inline;
margin-right: $spacing-xs;
}
}
.list--links {
@include line-height('normal');
li {
margin-bottom: $spacing-sm;
}
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.list--icon-bullets {
list-style: none;
padding: 0;
li {
padding-left: 1.5em;
}
.icon {
float: left;
top: 0.5em;
margin-left: -1.5em;
}
a {
display: inline-table; // prevents icon/text wrapping line
}
&.list--inline {
li {
margin-right: 1em;
}
}
&.list--links {
.icon {
top: 0.2em;
}
}
}
.list--icon-bullets {
}
.list--inline-bulleted {
padding: 0;
li {
display: inline;
margin-right: $spacing-xs;
&:before {
content: '•';
margin-right: $spacing-xs;
font-weight: bold;
color: $primary;
}
&:first-child {
&:before {
display: none;
}
}
}
}
.list--inline-floated {
padding-left: 0;
li {
float: left;
margin-left: 1.5rem;
}
}
.list--steps {
$number-accent-colors: (
'red': $red,
'pink': $pink,
'maroon': $maroon,
'slate': $slate,
'blue-ldn': $blue--deep-ldn,
);
list-style: none;
padding-inline-start: $spacing-3xl;
counter-reset: list--steps;
margin-bottom: $spacing-4xl;
> li {
position: relative;
border-left: $border-accent-width solid $neutral--primary;
border-color: var(--accent-color, #{$neutral--primary});
padding-left: $spacing-lg;
margin-bottom: $spacing-2xl;
&::before {
content: counter(list--steps);
counter-increment: list--steps;
display: block;
float: left;
clear: left;
margin-left: -#{$spacing-3xl + $spacing-lg + $border-accent-width/2};
width: $spacing-3xl;
padding: $spacing-2xs 0;
background: var(--accent-color, #{$neutral--primary});
color: white;
@include typescale('3xl');
font-weight: 500;
line-height: 1.4; // matches .title
text-align: center;
}
}
&__box {
background: $greyblue--superlight;
padding: calc(#{$spacing-sm} + 2.5%);
margin-left: -$spacing-lg;
}
&__title {
}
&__cta {
.button:only-child {
margin-bottom: 0;
}
}
//-- ACCENT THEMES
@each $name, $value in $number-accent-colors {
&-accent-#{$name} {
--accent-color: #{$value};
}
}
//--
&.accordion {
// component fusion, like Jazz fusion; not sure if this is a wonderful or terrible idea (probably terrible)
border-bottom: 0;
> li {
border-color: $primary;
border-color: var(--accent-color, #{$primary});
&::before {
background-color: $primary;
background-color: var(--accent-color, #{$primary});
}
}
.accordion__title {
background: $greyblue--superlight;
}
.accordion__title,
.accordion__content {
padding-left: calc(#{$spacing-sm} + 2.5%);
}
.accordion__item {
border-top: none;
margin-left: -$spacing-lg;
}
.accordion__toggle {
padding-left: 0;
&:before {
float: right;
margin: 0 0 0 $spacing-md;
}
}
}
}