Care cards

Use care cards to help users identify and understand the sort of care they need, who to contact and how quickly.

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:

 

 

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>

 

 

Previous Pagination
Next Warning callout