Care Cards
We have 3 care cards for 3 levels of urgency:
- Non-urgent care card (purple)
- Urgent care card (red)
- Immediate care card (red and dark grey)
How to use Care Cards
Create care cards with the example raw HTML block below. Follow the instruction within the raw HTML code to alter content. Or you can copy and paste the codes below to the page you are working on:
- Code for Non-urgent care card (purple)
- Code for Urgent care card (red)
- Code for Immediate care card (red and dark grey)
Non-urgent care card
Use this card when you want users to contact their GP or arrange an appointment with a health professional, like a practice nurse. You can also use it to tell people to get advice from a pharmacist or to go to a clinic.
Code for Non-urgent care card
CSS code
Paste the below style code at the top of your HTML page content
<style>
.non-urgent-care-header {
position: relative;
background: #782B90;
padding: 15px;
text-align: left;
}
.non-urgent-care-header:after {
content: '';
position: absolute;
top: 100%;
left: 5%;
background: #782B90;
width: 20px;
height: 15px;
/* The points are: (left top: x y, right top: x y, center bottom: x y) */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.non-urgent-care-header h4{
font-size: 18px;
line-height: 1.2;
margin: 0px -10px 0px;
color: #ffffff;
display: inline-block;
padding: 8px 32px;
position: relative;
}
.non-urgent-care-card {
background-color: #f5f5f5;
padding:22px 32px;
margin-bottom:16px;
}
</style>
Html code
Paste the below style code in your HTML page content
<div class="non-urgent-care-header">
<h4><strong>Non-urgent care card - Change text here.</strong></h4>
</div>
<div class="non-urgent-care-card">
<p>Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here.</p>
</div>
Urgent care card
Use this card when you want users to call or visit a GP or hospital urgently because they need advice or care quickly. You can, for example, use it to tell people to contact 111 or to go to a walk-in centre or minor injuries centre.
Code for Urgent care card
CSS code
Paste the below style code at the top of your HTML page content
<style><!--
.urgent-care-header {
position: relative;
background: #B9201C;
padding: 15px;
text-align: left;
}
.urgent-care-header:after {
content: '';
position: absolute;
top: 100%;
left: 5%;
background: #B9201C;
width: 20px;
height: 15px;
/* The points are: (left top: x y, right top: x y, center bottom: x y) */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.urgent-care-header h4{
font-size: 18px;
line-height: 1.2;
margin: 0px -10px 0px;
color: #ffffff;
display: inline-block;
padding: 8px 32px;
position: relative;
}
.urgent-care-card {
background-color: #f5f5f5;
padding:22px 32px;
margin-bottom:16px;
}
--></style>
Html code
Paste the below style code in your HTML page content
<div class="urgent-care-header">
<h4><strong>Urgent care card - Change text here</strong></h4>
</div>
<div class="urgent-care-card">
<p>Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here.</p>
</div>
Immediate care card
Use this card when users need to get emergency help straight away - meaning "now". Tell them to dial 999 or go to their nearest accident and emergency (A&E) department.
Where appropriate, include a link to help users find their nearest hospital A&E department.
Code for Immediate and urgent care card
CSS code
Paste the below style code at the top of your HTML page content
<style>
.immediate-care-header {
position: relative;
background: #B9201C;
padding: 15px;
text-align: left;
}
.immediate-care-header:after {
content: '';
position: absolute;
top: 100%;
left: 5%;
background: #B9201C;
width: 20px;
height: 15px;
/* The points are: (left top: x y, right top: x y, center bottom: x y) */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.immediate-care-header h4{
font-size: 18px;
line-height: 1.2;
margin: 0px -10px 0px;
color: #ffffff;
display: inline-block;
padding: 8px 32px;
position: relative;
}
.immediate-care-card {
background-color: #39393A;
padding:22px 32px;
margin-bottom:16px;
}
.immediate-care-card p{
color: #ffffff;
}
</style>
Html code
Paste the below style code in your HTML page content
<div class="immediate-care-header">
<h4><strong>Immediate care card - Change text here</strong></h4>
</div>
<div class="immediate-care-card">
<p>Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here. Change the text here.</p>
</div>
Immediate care card
Use this card when users need to get emergency help straight away - meaning "now". Tell them to dial 999 or go to their nearest accident and emergency (A&E) department.
Where appropriate, include a link to help users find their nearest hospital A&E department.
- test bullet (doesn't work)
