Lists

                
<section class="elements lists dt-section">
    <div class="container">
        <h2>List Style 1</h2>
        <div class="list-1">
            <ul class="list-unstyled">
                <li>
                    <span></span>
                    <p>Et harum quidem rerum facilis est et expedita distinctio</p>
                </li>
                <li>
                    <span></span>
                    <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
                </li>
                <li>
                    <span></span>
                    <p>Ut enim ad minima veniam, quis nostrum exercitationem</p>
                </li>
                <li>
                    <span></span>
                    <p>Nullam quis risus eget urna mollis ornare donec elit</p>
                </li>
                <li>
                    <span></span>
                    <p>Nemo enim ipsam voluptatem quia volupta esse cillum</p>
                </li>
                <li>
                    <span></span>
                    <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
                </li>
            </ul>
        </div>
    </div>
</section>
                Copy to clipboard
            

                
<section class="elements lists dt-section">
    <div class="container">
                <ul class="list-unstyled list-2">
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Et harum quidem rerum facilis est et expedita distinctio</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Ut enim ad minima veniam, quis nostrum exercitationem</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nullam quis risus eget urna mollis ornare donec elit</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nemo enim ipsam voluptatem quia volupta esse cillum</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="175" height="150" viewBox="0 0 175 150">
                        <path data-name="Path 40891" d="M298.891,294.09a16.137,16.137,0,0,0-22.9.746,16.375,16.375,0,0,0,.737,23.046l51.852,48.912a16.137,16.137,0,0,0,23.871-1.888L443.19,247.517a16.372,16.372,0,0,0-2.844-22.881,16.133,16.133,0,0,0-22.736,2.861L337.775,330.77Z" transform="translate(-271.604 -221.201)" fill="#1a1a1a"/>
                    </svg>
                 </div>
                <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
            </li>
        </ul>
    </div>
</section>
                Copy to clipboard
            

                
<section class="elements lists dt-section">
    <div class="container">
        <h2>List Style 3</h2>
        <ul class="list-unstyled list-3">
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Et harum quidem rerum facilis est et expedita distinctio</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Ut enim ad minima veniam, quis nostrum exercitationem</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nullam quis risus eget urna mollis ornare donec elit</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nemo enim ipsam voluptatem quia volupta esse cillum</p>
            </li>
            <li>
                <div class="svg-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                        <path data-name="Path 40877" d="M181.96,36.961a75,75,0,1,0,75,75A74.932,74.932,0,0,0,181.96,36.961Zm36.29,59.447-44.413,44.24A6.822,6.822,0,0,1,169,142.721a6.536,6.536,0,0,1-4.839-2.073l-21.947-21.775a6.966,6.966,0,0,1,9.851-9.851L169,125.957l39.4-39.4a6.886,6.886,0,0,1,9.851,0,7.213,7.213,0,0,1,0,9.852Z" transform="translate(-106.96 -36.961)" fill="#1a1a1a"/>
                    </svg>
                </div>
                <p>Nam libero tempore cum soluta nobis est eligendi optio cumque</p>
            </li>
        </ul>
    </div>
</section>
                Copy to clipboard