Dos and Don'ts list

Use Do and Don't lists to help users understand more easily what they should and shouldn't do.

Dos and Don'ts list

Use dos and don'ts list to give users clear and simple advice, for example about treating a problem themselves.

How to use Dos and Don'ts list

Create Dos and Dont's with the example raw HTML block below. Follow the instruction within the raw HTML code to alter the content. Or you can copy and paste the code below to the content page you are working on:

 

Dos

  • Keep your points as brief as possible.
  • Dos normally come before Don'ts.
  • It is alright to just have Don'ts if there aren't any Dos and just Dos if there aren't any Don'ts.
  • Treat the heading as a lead-in and the items under the heading as part of 1 long sentence. Start each bullet point lower case.
  • With Dos, just write the action.

Codes for Do's

CSS codes
Paste the below style code at the top of your HTML page content

<style>
.dos {
background-color: #f5f5f5;
padding: 20px 40px 20px 40px;
padding-top: 0 !important;
margin-bottom: 20px;
}
.dos h4{
font-size: 14px;
line-height: 1.4;
background-color: #782B90;
color: #ffffff;
display: inline-block;
margin: 0 -40px 8px;
padding: 8px 32px;
position: relative;
top: -16px;
}
.do-li {
position: relative;
padding-left: 1.5em; /* space to preserve indentation on wrap */
background-image: none !important;
}
.do-li:before {
content: '\2714';
position: absolute;
left: 0; /* place the SVG at the start of the padding */
width: 1em;
height: 1em;
color: #007f3b;
}
</style>

 

Html codes
Insert the below html code in your HTML body content

<div class="dos">
<h4><strong>Dos</strong></h4>
<ul>
<li class= 'do-li'>Change the text here.</li>
<li class= 'do-li'>Change the text here.</li>
<li class= 'do-li'>Change the text here.</li>
<li class= 'do-li'>Change the text here.</li>
<li class= 'do-li'>Change the text here.</li>
</div>

 

Don'ts

  • Keep your points as brief as possible.
  • Dos normally come before Don'ts.
  • It is alright to just have Don'ts if there aren't any Dos and just Dos if there aren't any Don'ts.
  • Treat the heading as a lead-in and the items under the heading as part of 1 long sentence. Start each bullet point lower case.
  • With Don'ts, include "do not" at the beginning of each bullet point.

Code for Don'ts 

CSS code
Paste the below style code at the top of your HTML page content

<style>
.dos {
background-color: #f5f5f5;
padding: 20px 40px 20px 40px;
padding-top: 0 !important;
margin-bottom: 20px;
}
.dos h4{
font-size: 14px;
line-height: 1.4;
background-color: #782B90;
color: #ffffff;
display: inline-block;
margin: 0 -40px 8px;
padding: 8px 32px;
position: relative;
top: -16px;
}
.don-li {
position: relative;
padding-left: 1.5em; /* space to preserve indentation on wrap */
background-image: none !important;
}
.don-li:before {
content: '\2716';
position: absolute;
left: 0; /* place the SVG at the start of the padding */
width: 1em;
height: 1em;
color: #d5281b;
}
</style>

Html code
Insert the below html code in your HTML body content

<div class="dos">
<h4><strong>Don'ts</strong></h4>
<ul>
<li class= 'don-li'>Change the text here.</li>
<li class= 'don-li'>Change the text here.</li>
<li class= 'don-li'>Change the text here.</li>
<li class= 'don-li'>Change the text here.</li>
<li class= 'don-li'>Change the text here.</li>
</div>