Lists

                        
<ul class="list-style-1">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="258" height="200" viewBox="0 0 258 200">
                    <path data-name="Path 40141" d="M426.381,167.3c-45.616,48.784-91.268,97.327-136.935,146.121l-70.722-62.888L194.86,281.121l83.817,74.533,13.1,11.646,12.076-12.886c49.642-53.086,99.309-105.855,149.01-159L426.373,167.3Z" transform="translate(-194.86 -167.3)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="258" height="200" viewBox="0 0 258 200">
                    <path data-name="Path 40141" d="M426.381,167.3c-45.616,48.784-91.268,97.327-136.935,146.121l-70.722-62.888L194.86,281.121l83.817,74.533,13.1,11.646,12.076-12.886c49.642-53.086,99.309-105.855,149.01-159L426.373,167.3Z" transform="translate(-194.86 -167.3)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
            </div>
        </div>   
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="258" height="200" viewBox="0 0 258 200">
                    <path data-name="Path 40141" d="M426.381,167.3c-45.616,48.784-91.268,97.327-136.935,146.121l-70.722-62.888L194.86,281.121l83.817,74.533,13.1,11.646,12.076-12.886c49.642-53.086,99.309-105.855,149.01-159L426.373,167.3Z" transform="translate(-194.86 -167.3)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="258" height="200" viewBox="0 0 258 200">
                    <path data-name="Path 40141" d="M426.381,167.3c-45.616,48.784-91.268,97.327-136.935,146.121l-70.722-62.888L194.86,281.121l83.817,74.533,13.1,11.646,12.076-12.886c49.642-53.086,99.309-105.855,149.01-159L426.373,167.3Z" transform="translate(-194.86 -167.3)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="258" height="200" viewBox="0 0 258 200">
                    <path data-name="Path 40141" d="M426.381,167.3c-45.616,48.784-91.268,97.327-136.935,146.121l-70.722-62.888L194.86,281.121l83.817,74.533,13.1,11.646,12.076-12.886c49.642-53.086,99.309-105.855,149.01-159L426.373,167.3Z" transform="translate(-194.86 -167.3)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>
                        Copy to clipboard
                    

                        
<ul class="list-style-2">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="199.998" height="200" viewBox="0 0 199.998 200">
                    <path data-name="Subtraction 14" d="M-1920-10041.994a100.781,100.781,0,0,1-20.153-2.031,99.546,99.546,0,0,1-18.771-5.827,100.038,100.038,0,0,1-16.986-9.22,100.716,100.716,0,0,1-14.8-12.211,100.779,100.779,0,0,1-12.211-14.8,100.027,100.027,0,0,1-9.22-16.987,99.486,99.486,0,0,1-5.827-18.771A100.738,100.738,0,0,1-2020-10142a100.738,100.738,0,0,1,2.032-20.153,99.517,99.517,0,0,1,5.827-18.771,100.1,100.1,0,0,1,9.22-16.987,100.754,100.754,0,0,1,12.211-14.8,100.716,100.716,0,0,1,14.8-12.211,100.034,100.034,0,0,1,16.986-9.22,99.551,99.551,0,0,1,18.771-5.827,100.781,100.781,0,0,1,20.153-2.031,100.781,100.781,0,0,1,20.153,2.031,99.551,99.551,0,0,1,18.771,5.827,100.034,100.034,0,0,1,16.986,9.22,100.71,100.71,0,0,1,14.8,12.211,100.754,100.754,0,0,1,12.211,14.8,100.1,100.1,0,0,1,9.22,16.987,99.517,99.517,0,0,1,5.827,18.771A100.738,100.738,0,0,1-1820-10142a100.738,100.738,0,0,1-2.032,20.153,99.486,99.486,0,0,1-5.827,18.771,100.027,100.027,0,0,1-9.22,16.987,100.779,100.779,0,0,1-12.211,14.8,100.716,100.716,0,0,1-14.8,12.211,100.038,100.038,0,0,1-16.986,9.22,99.551,99.551,0,0,1-18.771,5.827A100.781,100.781,0,0,1-1920-10041.994Zm-46.571-107.181-10.572,13.109,37.13,31.942,5.8,4.989,5.349-5.521c10.974-11.354,22.138-22.868,32.935-34l.178-.185.561-.578c10.6-10.929,21.554-22.229,32.332-33.379l-11.731-12.048c-11.281,11.674-22.613,23.362-33.571,34.666-7.9,8.146-17.728,18.285-27.085,27.957l-31.326-26.951Z" transform="translate(2019.997 10241.994)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="199.998" height="200" viewBox="0 0 199.998 200">
                    <path data-name="Subtraction 14" d="M-1920-10041.994a100.781,100.781,0,0,1-20.153-2.031,99.546,99.546,0,0,1-18.771-5.827,100.038,100.038,0,0,1-16.986-9.22,100.716,100.716,0,0,1-14.8-12.211,100.779,100.779,0,0,1-12.211-14.8,100.027,100.027,0,0,1-9.22-16.987,99.486,99.486,0,0,1-5.827-18.771A100.738,100.738,0,0,1-2020-10142a100.738,100.738,0,0,1,2.032-20.153,99.517,99.517,0,0,1,5.827-18.771,100.1,100.1,0,0,1,9.22-16.987,100.754,100.754,0,0,1,12.211-14.8,100.716,100.716,0,0,1,14.8-12.211,100.034,100.034,0,0,1,16.986-9.22,99.551,99.551,0,0,1,18.771-5.827,100.781,100.781,0,0,1,20.153-2.031,100.781,100.781,0,0,1,20.153,2.031,99.551,99.551,0,0,1,18.771,5.827,100.034,100.034,0,0,1,16.986,9.22,100.71,100.71,0,0,1,14.8,12.211,100.754,100.754,0,0,1,12.211,14.8,100.1,100.1,0,0,1,9.22,16.987,99.517,99.517,0,0,1,5.827,18.771A100.738,100.738,0,0,1-1820-10142a100.738,100.738,0,0,1-2.032,20.153,99.486,99.486,0,0,1-5.827,18.771,100.027,100.027,0,0,1-9.22,16.987,100.779,100.779,0,0,1-12.211,14.8,100.716,100.716,0,0,1-14.8,12.211,100.038,100.038,0,0,1-16.986,9.22,99.551,99.551,0,0,1-18.771,5.827A100.781,100.781,0,0,1-1920-10041.994Zm-46.571-107.181-10.572,13.109,37.13,31.942,5.8,4.989,5.349-5.521c10.974-11.354,22.138-22.868,32.935-34l.178-.185.561-.578c10.6-10.929,21.554-22.229,32.332-33.379l-11.731-12.048c-11.281,11.674-22.613,23.362-33.571,34.666-7.9,8.146-17.728,18.285-27.085,27.957l-31.326-26.951Z" transform="translate(2019.997 10241.994)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="199.998" height="200" viewBox="0 0 199.998 200">
                    <path data-name="Subtraction 14" d="M-1920-10041.994a100.781,100.781,0,0,1-20.153-2.031,99.546,99.546,0,0,1-18.771-5.827,100.038,100.038,0,0,1-16.986-9.22,100.716,100.716,0,0,1-14.8-12.211,100.779,100.779,0,0,1-12.211-14.8,100.027,100.027,0,0,1-9.22-16.987,99.486,99.486,0,0,1-5.827-18.771A100.738,100.738,0,0,1-2020-10142a100.738,100.738,0,0,1,2.032-20.153,99.517,99.517,0,0,1,5.827-18.771,100.1,100.1,0,0,1,9.22-16.987,100.754,100.754,0,0,1,12.211-14.8,100.716,100.716,0,0,1,14.8-12.211,100.034,100.034,0,0,1,16.986-9.22,99.551,99.551,0,0,1,18.771-5.827,100.781,100.781,0,0,1,20.153-2.031,100.781,100.781,0,0,1,20.153,2.031,99.551,99.551,0,0,1,18.771,5.827,100.034,100.034,0,0,1,16.986,9.22,100.71,100.71,0,0,1,14.8,12.211,100.754,100.754,0,0,1,12.211,14.8,100.1,100.1,0,0,1,9.22,16.987,99.517,99.517,0,0,1,5.827,18.771A100.738,100.738,0,0,1-1820-10142a100.738,100.738,0,0,1-2.032,20.153,99.486,99.486,0,0,1-5.827,18.771,100.027,100.027,0,0,1-9.22,16.987,100.779,100.779,0,0,1-12.211,14.8,100.716,100.716,0,0,1-14.8,12.211,100.038,100.038,0,0,1-16.986,9.22,99.551,99.551,0,0,1-18.771,5.827A100.781,100.781,0,0,1-1920-10041.994Zm-46.571-107.181-10.572,13.109,37.13,31.942,5.8,4.989,5.349-5.521c10.974-11.354,22.138-22.868,32.935-34l.178-.185.561-.578c10.6-10.929,21.554-22.229,32.332-33.379l-11.731-12.048c-11.281,11.674-22.613,23.362-33.571,34.666-7.9,8.146-17.728,18.285-27.085,27.957l-31.326-26.951Z" transform="translate(2019.997 10241.994)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="199.998" height="200" viewBox="0 0 199.998 200">
                    <path data-name="Subtraction 14" d="M-1920-10041.994a100.781,100.781,0,0,1-20.153-2.031,99.546,99.546,0,0,1-18.771-5.827,100.038,100.038,0,0,1-16.986-9.22,100.716,100.716,0,0,1-14.8-12.211,100.779,100.779,0,0,1-12.211-14.8,100.027,100.027,0,0,1-9.22-16.987,99.486,99.486,0,0,1-5.827-18.771A100.738,100.738,0,0,1-2020-10142a100.738,100.738,0,0,1,2.032-20.153,99.517,99.517,0,0,1,5.827-18.771,100.1,100.1,0,0,1,9.22-16.987,100.754,100.754,0,0,1,12.211-14.8,100.716,100.716,0,0,1,14.8-12.211,100.034,100.034,0,0,1,16.986-9.22,99.551,99.551,0,0,1,18.771-5.827,100.781,100.781,0,0,1,20.153-2.031,100.781,100.781,0,0,1,20.153,2.031,99.551,99.551,0,0,1,18.771,5.827,100.034,100.034,0,0,1,16.986,9.22,100.71,100.71,0,0,1,14.8,12.211,100.754,100.754,0,0,1,12.211,14.8,100.1,100.1,0,0,1,9.22,16.987,99.517,99.517,0,0,1,5.827,18.771A100.738,100.738,0,0,1-1820-10142a100.738,100.738,0,0,1-2.032,20.153,99.486,99.486,0,0,1-5.827,18.771,100.027,100.027,0,0,1-9.22,16.987,100.779,100.779,0,0,1-12.211,14.8,100.716,100.716,0,0,1-14.8,12.211,100.038,100.038,0,0,1-16.986,9.22,99.551,99.551,0,0,1-18.771,5.827A100.781,100.781,0,0,1-1920-10041.994Zm-46.571-107.181-10.572,13.109,37.13,31.942,5.8,4.989,5.349-5.521c10.974-11.354,22.138-22.868,32.935-34l.178-.185.561-.578c10.6-10.929,21.554-22.229,32.332-33.379l-11.731-12.048c-11.281,11.674-22.613,23.362-33.571,34.666-7.9,8.146-17.728,18.285-27.085,27.957l-31.326-26.951Z" transform="translate(2019.997 10241.994)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="199.998" height="200" viewBox="0 0 199.998 200">
                    <path data-name="Subtraction 14" d="M-1920-10041.994a100.781,100.781,0,0,1-20.153-2.031,99.546,99.546,0,0,1-18.771-5.827,100.038,100.038,0,0,1-16.986-9.22,100.716,100.716,0,0,1-14.8-12.211,100.779,100.779,0,0,1-12.211-14.8,100.027,100.027,0,0,1-9.22-16.987,99.486,99.486,0,0,1-5.827-18.771A100.738,100.738,0,0,1-2020-10142a100.738,100.738,0,0,1,2.032-20.153,99.517,99.517,0,0,1,5.827-18.771,100.1,100.1,0,0,1,9.22-16.987,100.754,100.754,0,0,1,12.211-14.8,100.716,100.716,0,0,1,14.8-12.211,100.034,100.034,0,0,1,16.986-9.22,99.551,99.551,0,0,1,18.771-5.827,100.781,100.781,0,0,1,20.153-2.031,100.781,100.781,0,0,1,20.153,2.031,99.551,99.551,0,0,1,18.771,5.827,100.034,100.034,0,0,1,16.986,9.22,100.71,100.71,0,0,1,14.8,12.211,100.754,100.754,0,0,1,12.211,14.8,100.1,100.1,0,0,1,9.22,16.987,99.517,99.517,0,0,1,5.827,18.771A100.738,100.738,0,0,1-1820-10142a100.738,100.738,0,0,1-2.032,20.153,99.486,99.486,0,0,1-5.827,18.771,100.027,100.027,0,0,1-9.22,16.987,100.779,100.779,0,0,1-12.211,14.8,100.716,100.716,0,0,1-14.8,12.211,100.038,100.038,0,0,1-16.986,9.22,99.551,99.551,0,0,1-18.771,5.827A100.781,100.781,0,0,1-1920-10041.994Zm-46.571-107.181-10.572,13.109,37.13,31.942,5.8,4.989,5.349-5.521c10.974-11.354,22.138-22.868,32.935-34l.178-.185.561-.578c10.6-10.929,21.554-22.229,32.332-33.379l-11.731-12.048c-11.281,11.674-22.613,23.362-33.571,34.666-7.9,8.146-17.728,18.285-27.085,27.957l-31.326-26.951Z" transform="translate(2019.997 10241.994)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>
                        Copy to clipboard
                    

                        
<ul class="list-style-3">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
                    <path data-name="Icon material-keyboard-arrow-down" d="M38.375,161.76,134,69.047l95.625,92.713L259,133.217,134,11.76,9,133.217Z" transform="translate(161.76 -9) rotate(90)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
                    <path data-name="Icon material-keyboard-arrow-down" d="M38.375,161.76,134,69.047l95.625,92.713L259,133.217,134,11.76,9,133.217Z" transform="translate(161.76 -9) rotate(90)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
                    <path data-name="Icon material-keyboard-arrow-down" d="M38.375,161.76,134,69.047l95.625,92.713L259,133.217,134,11.76,9,133.217Z" transform="translate(161.76 -9) rotate(90)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
                    <path data-name="Icon material-keyboard-arrow-down" d="M38.375,161.76,134,69.047l95.625,92.713L259,133.217,134,11.76,9,133.217Z" transform="translate(161.76 -9) rotate(90)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
            </div>
        </div>
    </li>
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="250" viewBox="0 0 150 250">
                    <path data-name="Icon material-keyboard-arrow-down" d="M38.375,161.76,134,69.047l95.625,92.713L259,133.217,134,11.76,9,133.217Z" transform="translate(161.76 -9) rotate(90)" fill="#111"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>
                        Copy to clipboard