List

Apply the class to the <ul> element.

Classvalue

When using the list-reset or list-style-none class, add role="list" to the <ul> element.

List with checkmark

Classvalue

When using the lists with checkmark add role="list" to the <ul> element.

Custom Properties

:root {
    --list-fs: var(--caption);
    --list-margin: 0;
    --list-line-height: 1.3;
    --list-padding-left: 16px;
    --list-bg-pos: 0 -3px;
    --list-check-svg-sm: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.3562 5.60499C9.30971 5.55813 9.25441 5.52093 9.19348 5.49555C9.13256 5.47016 9.0672 5.45709 9.0012 5.45709C8.93519 5.45709 8.86984 5.47016 8.80891 5.49555C8.74798 5.52093 8.69268 5.55813 8.6462 5.60499L4.9212 9.33499L3.3562 7.76499C3.30793 7.71837 3.25096 7.68172 3.18854 7.65711C3.12611 7.63251 3.05945 7.62045 2.99236 7.62161C2.92527 7.62277 2.85906 7.63713 2.79752 7.66388C2.73598 7.69062 2.68031 7.72923 2.6337 7.77749C2.58708 7.82575 2.55042 7.88272 2.52582 7.94515C2.50122 8.00758 2.48915 8.07424 2.49031 8.14133C2.49147 8.20842 2.50584 8.27463 2.53258 8.33616C2.55933 8.3977 2.59793 8.45337 2.6462 8.49999L4.5662 10.42C4.61268 10.4669 4.66798 10.5041 4.72891 10.5294C4.78984 10.5548 4.85519 10.5679 4.9212 10.5679C4.9872 10.5679 5.05255 10.5548 5.11348 10.5294C5.17441 10.5041 5.22971 10.4669 5.2762 10.42L9.3562 6.33999C9.40695 6.29317 9.44745 6.23634 9.47516 6.17309C9.50286 6.10984 9.51716 6.04154 9.51716 5.97249C9.51716 5.90344 9.50286 5.83514 9.47516 5.77189C9.44745 5.70864 9.40695 5.65181 9.3562 5.60499Z' fill='%2346D9D1'/%3E%3C/svg%3E%0A");
    --list-check-svg-md: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7104 11.21C18.6175 11.1162 18.5069 11.0418 18.385 10.9911C18.2632 10.9403 18.1325 10.9142 18.0004 10.9142C17.8684 10.9142 17.7377 10.9403 17.6159 10.9911C17.494 11.0418 17.3834 11.1162 17.2904 11.21L9.84044 18.67L6.71044 15.53C6.61392 15.4367 6.49998 15.3634 6.37512 15.3142C6.25027 15.265 6.11694 15.2409 5.98276 15.2432C5.84858 15.2455 5.71617 15.2742 5.59309 15.3277C5.47001 15.3812 5.35868 15.4584 5.26544 15.555C5.1722 15.6515 5.09889 15.7654 5.04968 15.8903C5.00048 16.0151 4.97635 16.1484 4.97867 16.2826C4.98099 16.4168 5.00972 16.5492 5.06321 16.6723C5.1167 16.7954 5.19392 16.9067 5.29044 17L9.13044 20.84C9.2234 20.9337 9.334 21.0081 9.45586 21.0588C9.57772 21.1096 9.70843 21.1357 9.84044 21.1357C9.97245 21.1357 10.1032 21.1096 10.225 21.0588C10.3469 21.0081 10.4575 20.9337 10.5504 20.84L18.7104 12.68C18.8119 12.5863 18.893 12.4727 18.9484 12.3462C19.0038 12.2197 19.0324 12.0831 19.0324 11.945C19.0324 11.8069 19.0038 11.6702 18.9484 11.5437C18.893 11.4172 18.8119 11.3036 18.7104 11.21Z' fill='%2346D9D1'/%3E%3C/svg%3E");
    --list-check-svg-lg: url("data:image/svg+xml,%3Csvg width='24' height='32' viewBox='0 0 24 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.7104 11.21C18.6175 11.1162 18.5069 11.0418 18.385 10.9911C18.2632 10.9403 18.1325 10.9142 18.0004 10.9142C17.8684 10.9142 17.7377 10.9403 17.6159 10.9911C17.494 11.0418 17.3834 11.1162 17.2904 11.21L9.84044 18.67L6.71044 15.53C6.61392 15.4367 6.49998 15.3634 6.37512 15.3142C6.25027 15.265 6.11694 15.2409 5.98276 15.2432C5.84858 15.2455 5.71617 15.2742 5.59309 15.3277C5.47001 15.3812 5.35868 15.4584 5.26544 15.555C5.1722 15.6515 5.09889 15.7654 5.04968 15.8903C5.00048 16.0151 4.97635 16.1484 4.97867 16.2826C4.98099 16.4168 5.00972 16.5492 5.06321 16.6723C5.1167 16.7954 5.19392 16.9067 5.29044 17L9.13044 20.84C9.2234 20.9337 9.334 21.0081 9.45586 21.0588C9.57772 21.1096 9.70843 21.1357 9.84044 21.1357C9.97245 21.1357 10.1032 21.1096 10.225 21.0588C10.3469 21.0081 10.4575 20.9337 10.5504 20.84L18.7104 12.68C18.8119 12.5863 18.893 12.4727 18.9484 12.3462C19.0038 12.2197 19.0324 12.0831 19.0324 11.945C19.0324 11.8069 19.0038 11.6702 18.9484 11.5437C18.893 11.4172 18.8119 11.3036 18.7104 11.21Z' fill='%2346D9D1'/%3E%3C/svg%3E");
}