Advanced Examples

Adding custom list bullets

ul {
  padding-left: 10px;
}

li {
  list-style: none;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 8px 0 8px 32px;
  background-position-y: 10px;
  background-image: url("data:image/svg+xml,%3Csvg   xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' x='0px' y='0px'%3E%3Ctitle%3E04 Check%3C/title%3E%3Cg data-name='Check'%3E%3Cpath fill='%23748A4B' d='M15,18.16,26.4,6.72a1,1,0,0,1,1.42,0,1,1,0,0,1,0,1.41L15.67,20.28a1,1,0,0,1-.71.29,1,1,0,0,1-.7-.29L9.18,15.21a1,1,0,0,1,1.42-1.42Zm15.89-4.3a1,1,0,1,0-2,.28A12.82,12.82,0,0,1,29,16,13,13,0,1,1,21.57,4.25a1,1,0,0,0,.86-1.81A15,15,0,1,0,31,16,15.18,15.18,0,0,0,30.85,13.86Z'/%3E%3C/g%3E%3C/svg%3E");
}

Comparison Chart

Here's a little example of how to use CSS to create a stylish comparison chart using the Value icons - horizontal. CSS code included in the comments of the video.

Custom CSS
=======================

.dsgn-pck__small-heading {
 font-size: 32px;
 border-bottom: 1px solid;
 padding-bottom: 32px;
 text-align: center;
}

.dsgn-pck__text p:first-of-type {
 font-family: monospace;
 font-weight: 500;
 font-size: 16px;
 line-height: 122%;
 letter-spacing: 0.1em;
}

.dsgn-pck__text p:nth-of-type(2) {
 font-weight: 700;
 font-size: 64px;
 margin-bottom: 16px;
 margin-top: 16px;
}

.dsgn-pck__text p:nth-of-type(3) {
 font-size: 24px;
 border-bottom: 1px solid;
 padding-bottom: 48px;
  padding-right: 16px;
}

.dsgn-pck__text p:nth-of-type(4) {
 font-family: monospace;
 font-weight: 500;
 font-size: 16px;
}

.dsgn-pck__text p:nth-of-type(5) {
 font-family: 'muli';
 font-weight: 700;
 font-size: 64px;
 margin-bottom: 16px;
 margin-top: 16px;
}

.dsgn-pck__text p:nth-of-type(6) {
 font-weight: 100;
 font-size: 24px;
 border-bottom: 1px solid;
 padding-bottom: 48px;
  padding-right: 16px;
}

Mobile custom CSS
=================

.dsgn-pck__heading {
 width: 80%;
 margin: 0 auto;
 margin-bottom: 32px;
}

.dsgn-pck__small-heading {
 font-size: 32px;
 padding-bottom: 20px;
}

.dsgn-pck__text p:nth-of-type(2) {
 font-weight: 700;
 font-size: 48px;
}

.dsgn-pck__text p:nth-of-type(3) {
 font-weight: 400;
 font-size: 16px;
 padding-bottom: 16px;
}


.dsgn-pck__text p:nth-of-type(5) {
 font-weight: 700;
 font-size: 48px;
}

.dsgn-pck__text p:nth-of-type(6) {
 font-weight: 400;
 font-size: 16px;
 padding-bottom: 16px;
}