> For the complete documentation index, see [llms.txt](https://design-packs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design-packs.gitbook.io/docs/fundamentals/custom-css/advanced-examples.md).

# Advanced Examples

### Adding custom list bullets

{% embed url="<https://youtu.be/eDkhELFr-VQ>" %}

```
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 [Icon & Logos](/docs/fundamentals/sections-overview/icon-and-logos.md#value-icons-horizontal).  CSS code included in the comments of the video.

{% embed url="<https://youtu.be/C_peiXsWfe0>" %}

```
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;
}
```