Lists

                       
    <ul class="list-style-1">
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
                    <g data-name="Group 40485" transform="translate(-490.47 -1033.47)">
                        <rect data-name="Rectangle 21" width="200" height="200" rx="100" transform="translate(490.47 1033.47)" fill="#131517" opacity="0.1"/>
                        <path data-name="Path 12" d="M209.633,120.939,159.75,170.389a7.084,7.084,0,0,1-10,0l-24.886-24.884a6.987,6.987,0,0,1,0-9.954,7.085,7.085,0,0,1,10,0l20,19.908,44.884-44.474a7.016,7.016,0,1,1,9.888,9.954Z" transform="translate(423.197 992.781)" fill="#131517" fill-rule="evenodd"/>
                    </g>
                </svg>
            </div>
            At vero eos et accusamus et iusto odio
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
                    <g data-name="Group 40485" transform="translate(-490.47 -1033.47)">
                        <rect data-name="Rectangle 21" width="200" height="200" rx="100" transform="translate(490.47 1033.47)" fill="#131517" opacity="0.1"/>
                        <path data-name="Path 12" d="M209.633,120.939,159.75,170.389a7.084,7.084,0,0,1-10,0l-24.886-24.884a6.987,6.987,0,0,1,0-9.954,7.085,7.085,0,0,1,10,0l20,19.908,44.884-44.474a7.016,7.016,0,1,1,9.888,9.954Z" transform="translate(423.197 992.781)" fill="#131517" fill-rule="evenodd"/>
                    </g>
                </svg>
            </div>
            Quis autem vel eum iure reprehend
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
                    <g data-name="Group 40485" transform="translate(-490.47 -1033.47)">
                        <rect data-name="Rectangle 21" width="200" height="200" rx="100" transform="translate(490.47 1033.47)" fill="#131517" opacity="0.1"/>
                        <path data-name="Path 12" d="M209.633,120.939,159.75,170.389a7.084,7.084,0,0,1-10,0l-24.886-24.884a6.987,6.987,0,0,1,0-9.954,7.085,7.085,0,0,1,10,0l20,19.908,44.884-44.474a7.016,7.016,0,1,1,9.888,9.954Z" transform="translate(423.197 992.781)" fill="#131517" fill-rule="evenodd"/>
                    </g>
                </svg>
            </div>
            Excepteur sint occaecat cupidatat non proident
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
                    <g data-name="Group 40485" transform="translate(-490.47 -1033.47)">
                        <rect data-name="Rectangle 21" width="200" height="200" rx="100" transform="translate(490.47 1033.47)" fill="#131517" opacity="0.1"/>
                        <path data-name="Path 12" d="M209.633,120.939,159.75,170.389a7.084,7.084,0,0,1-10,0l-24.886-24.884a6.987,6.987,0,0,1,0-9.954,7.085,7.085,0,0,1,10,0l20,19.908,44.884-44.474a7.016,7.016,0,1,1,9.888,9.954Z" transform="translate(423.197 992.781)" fill="#131517" fill-rule="evenodd"/>
                    </g>
                </svg>
            </div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
                    <g data-name="Group 40485" transform="translate(-490.47 -1033.47)">
                        <rect data-name="Rectangle 21" width="200" height="200" rx="100" transform="translate(490.47 1033.47)" fill="#131517" opacity="0.1"/>
                        <path data-name="Path 12" d="M209.633,120.939,159.75,170.389a7.084,7.084,0,0,1-10,0l-24.886-24.884a6.987,6.987,0,0,1,0-9.954,7.085,7.085,0,0,1,10,0l20,19.908,44.884-44.474a7.016,7.016,0,1,1,9.888,9.954Z" transform="translate(423.197 992.781)" fill="#131517" fill-rule="evenodd"/>
                    </g>
                </svg>
            </div>
            Sed ut perspiciatis unde omnis iste natus error.
        </li>
    </ul>
                       Copy to clipboard
                   

                       
    <ul class="list-style-2">
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="107" viewBox="0 0 150 107">
                    <path data-name="Path 12" d="M269.246,129.161l-84.122,83.281a11.958,11.958,0,0,1-16.861,0l-41.968-41.908a11.756,11.756,0,0,1,0-16.764,11.959,11.959,0,0,1,16.861,0L176.88,187.3l75.692-74.9a11.823,11.823,0,1,1,16.675,16.764Z" transform="translate(-122.782 -108.92)" fill="#131517" fill-rule="evenodd"/>
                </svg>
            </div>
            At vero eos et accusamus et iusto odio
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="107" viewBox="0 0 150 107">
                    <path data-name="Path 12" d="M269.246,129.161l-84.122,83.281a11.958,11.958,0,0,1-16.861,0l-41.968-41.908a11.756,11.756,0,0,1,0-16.764,11.959,11.959,0,0,1,16.861,0L176.88,187.3l75.692-74.9a11.823,11.823,0,1,1,16.675,16.764Z" transform="translate(-122.782 -108.92)" fill="#131517" fill-rule="evenodd"/>
                </svg>
            </div>
            Quis autem vel eum iure reprehend
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="107" viewBox="0 0 150 107">
                    <path data-name="Path 12" d="M269.246,129.161l-84.122,83.281a11.958,11.958,0,0,1-16.861,0l-41.968-41.908a11.756,11.756,0,0,1,0-16.764,11.959,11.959,0,0,1,16.861,0L176.88,187.3l75.692-74.9a11.823,11.823,0,1,1,16.675,16.764Z" transform="translate(-122.782 -108.92)" fill="#131517" fill-rule="evenodd"/>
                </svg>
            </div>
            Excepteur sint occaecat cupidatat non proident
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="107" viewBox="0 0 150 107">
                    <path data-name="Path 12" d="M269.246,129.161l-84.122,83.281a11.958,11.958,0,0,1-16.861,0l-41.968-41.908a11.756,11.756,0,0,1,0-16.764,11.959,11.959,0,0,1,16.861,0L176.88,187.3l75.692-74.9a11.823,11.823,0,1,1,16.675,16.764Z" transform="translate(-122.782 -108.92)" fill="#131517" fill-rule="evenodd"/>
                </svg>
            </div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="107" viewBox="0 0 150 107">
                    <path data-name="Path 12" d="M269.246,129.161l-84.122,83.281a11.958,11.958,0,0,1-16.861,0l-41.968-41.908a11.756,11.756,0,0,1,0-16.764,11.959,11.959,0,0,1,16.861,0L176.88,187.3l75.692-74.9a11.823,11.823,0,1,1,16.675,16.764Z" transform="translate(-122.782 -108.92)" fill="#131517" fill-rule="evenodd"/>
                </svg>
            </div>
            Sed ut perspiciatis unde omnis iste natus error.
        </li>
    </ul>
                       Copy to clipboard
                   

                       
    <ul class="list-style-3">
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="349.999" viewBox="0 0 200 349.999">
                    <path data-name="Path 39785" d="M361.825,190.452a23.7,23.7,0,0,0-16.027,6.837L194.955,347.336A25.682,25.682,0,0,0,188.3,371.4a24.709,24.709,0,0,0,16.756,18.04,23.592,23.592,0,0,0,23.464-5.966L362.583,250.041,496.65,383.475a23.59,23.59,0,0,0,23.463,5.966,24.711,24.711,0,0,0,16.756-18.04,25.687,25.687,0,0,0-6.658-24.065L379.367,197.289a23.643,23.643,0,0,0-17.533-6.837Z" transform="translate(390.433 -187.583) rotate(90)" fill="#131517"/>
                </svg>
            </div>
            At vero eos et accusamus et iusto odio
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="349.999" viewBox="0 0 200 349.999">
                    <path data-name="Path 39785" d="M361.825,190.452a23.7,23.7,0,0,0-16.027,6.837L194.955,347.336A25.682,25.682,0,0,0,188.3,371.4a24.709,24.709,0,0,0,16.756,18.04,23.592,23.592,0,0,0,23.464-5.966L362.583,250.041,496.65,383.475a23.59,23.59,0,0,0,23.463,5.966,24.711,24.711,0,0,0,16.756-18.04,25.687,25.687,0,0,0-6.658-24.065L379.367,197.289a23.643,23.643,0,0,0-17.533-6.837Z" transform="translate(390.433 -187.583) rotate(90)" fill="#131517"/>
                </svg>
            </div>
            Quis autem vel eum iure reprehend
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="349.999" viewBox="0 0 200 349.999">
                    <path data-name="Path 39785" d="M361.825,190.452a23.7,23.7,0,0,0-16.027,6.837L194.955,347.336A25.682,25.682,0,0,0,188.3,371.4a24.709,24.709,0,0,0,16.756,18.04,23.592,23.592,0,0,0,23.464-5.966L362.583,250.041,496.65,383.475a23.59,23.59,0,0,0,23.463,5.966,24.711,24.711,0,0,0,16.756-18.04,25.687,25.687,0,0,0-6.658-24.065L379.367,197.289a23.643,23.643,0,0,0-17.533-6.837Z" transform="translate(390.433 -187.583) rotate(90)" fill="#131517"/>
                </svg>
            </div>
            Excepteur sint occaecat cupidatat non proident
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="349.999" viewBox="0 0 200 349.999">
                    <path data-name="Path 39785" d="M361.825,190.452a23.7,23.7,0,0,0-16.027,6.837L194.955,347.336A25.682,25.682,0,0,0,188.3,371.4a24.709,24.709,0,0,0,16.756,18.04,23.592,23.592,0,0,0,23.464-5.966L362.583,250.041,496.65,383.475a23.59,23.59,0,0,0,23.463,5.966,24.711,24.711,0,0,0,16.756-18.04,25.687,25.687,0,0,0-6.658-24.065L379.367,197.289a23.643,23.643,0,0,0-17.533-6.837Z" transform="translate(390.433 -187.583) rotate(90)" fill="#131517"/>
                </svg>
            </div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </li>
        <li>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="200" height="349.999" viewBox="0 0 200 349.999">
                    <path data-name="Path 39785" d="M361.825,190.452a23.7,23.7,0,0,0-16.027,6.837L194.955,347.336A25.682,25.682,0,0,0,188.3,371.4a24.709,24.709,0,0,0,16.756,18.04,23.592,23.592,0,0,0,23.464-5.966L362.583,250.041,496.65,383.475a23.59,23.59,0,0,0,23.463,5.966,24.711,24.711,0,0,0,16.756-18.04,25.687,25.687,0,0,0-6.658-24.065L379.367,197.289a23.643,23.643,0,0,0-17.533-6.837Z" transform="translate(390.433 -187.583) rotate(90)" fill="#131517"/>
                </svg>
            </div>
            Sed ut perspiciatis unde omnis iste natus error.
        </li>
    </ul>
                    Copy to clipboard