Lists

List Style 1

  • Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis

  • Quis autem vel eum iure reprehenderit qui in ea voluptate velit

  • Nam libero tempore, cum soluta nobis est eligendi option cumque

  • Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris

  • Quis autem vel eum iure reprehenderit qui in ea voluptate velit

  • Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris

                        
    <section class="lists elements dt-section">
        <div class="container">
            <div class="lists-block">
                <h2>List Style 1</h2>
                <div class="list-1">
                    <div class="list-wrapper">
                        <ul class="list-unstyled">
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</p>
                            </li>
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit</p>
                            </li>
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Nam libero tempore, cum soluta nobis est eligendi option cumque</p>
                            </li>
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            </li>
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit</p>
                            </li>
                            <li>
                                <div>
                                    <div class="svg-wrapper">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="125" viewBox="0 0 150 125">
                                            <path  data-name="Path 40189" d="M289.376,272.146a15.445,15.445,0,0,0-21.936.629,15.7,15.7,0,0,0,.626,22.088l46.55,44.271a15.447,15.447,0,0,0,22.9-1.769l72.416-93.747a15.7,15.7,0,0,0-2.724-21.928,15.444,15.444,0,0,0-21.773,2.743L323.511,304.6Z" transform="translate(-263.204 -218.399)" fill="#1a1725"/>
                                        </svg>
                                    </div>
                                </div>
                                <p>Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
                        
                    

List Style 2

  • Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis

  • Quis autem vel eum iure reprehenderit qui in ea voluptate velit

  • Nam libero tempore, cum soluta nobis est eligendi option cumque

  • Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris

  • Quis autem vel eum iure reprehenderit qui in ea voluptate velit

  • Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris

                        
    <section class="lists elements dt-section">
        <div class="container">
            <div class="lists-block">
                <h2>List Style 2</h2>
                <div class="list-2">
                    <div class="list-wrapper">
                        <ul class="list-unstyled">
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</p>
                            </li>
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit</p>
                            </li>
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Nam libero tempore, cum soluta nobis est eligendi option cumque</p>
                            </li>
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            </li>
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit</p>
                            </li>
                            <li>
                                <div class="svg-wrapper">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="10" viewBox="0 0 26 10">
                                        <path data-name="Path 41232" d="M1,21.867H24.9L21.45,25.481l.775.812,4.775-5-4.775-5-.775.812L24.9,20.719H1Z" transform="translate(-1 -16.293)" fill="#0f2239"/>
                                    </svg>
                                </div>
                                <p>Dolore enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
                        
                    
HEADER STYLE
COLOR SCHEMES