Lists

<section class="lists">
    <div class="container">
        <h2>List Style 1</h2>
        <ul class="list-style-1">
            <li>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <g id="Group_39197" data-name="Group 39197" transform="translate(-495.165 -2310.165)">
                            <rect id="Rectangle_1788" data-name="Rectangle 1788" width="18" height="18" rx="9" transform="translate(495.165 2310.165)" fill="#ee8d5a"></rect>
                            <path id="Path_2190" data-name="Path 2190" d="M6.657,11.566l-1.9-1.9a.545.545,0,1,0-.771.771l2.286,2.286a.545.545,0,0,0,.771,0l5.787-5.787a.545.545,0,1,0-.771-.771Z" transform="translate(495.755 2309.72)" fill="#fff"></path>
                        </g>
                    </svg>
                </div>
                Duis aute irur dolor in reprehenderit in voluptate
            </li>
            <li>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <g id="Group_39197" data-name="Group 39197" transform="translate(-495.165 -2310.165)">
                            <rect id="Rectangle_1788" data-name="Rectangle 1788" width="18" height="18" rx="9" transform="translate(495.165 2310.165)" fill="#ee8d5a"></rect>
                            <path id="Path_2190" data-name="Path 2190" d="M6.657,11.566l-1.9-1.9a.545.545,0,1,0-.771.771l2.286,2.286a.545.545,0,0,0,.771,0l5.787-5.787a.545.545,0,1,0-.771-.771Z" transform="translate(495.755 2309.72)" fill="#fff"></path>
                        </g>
                    </svg>
                </div>
                Marketing options and rates
            </li>
            <li>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <g id="Group_39197" data-name="Group 39197" transform="translate(-495.165 -2310.165)">
                            <rect id="Rectangle_1788" data-name="Rectangle 1788" width="18" height="18" rx="9" transform="translate(495.165 2310.165)" fill="#ee8d5a"></rect>
                            <path id="Path_2190" data-name="Path 2190" d="M6.657,11.566l-1.9-1.9a.545.545,0,1,0-.771.771l2.286,2.286a.545.545,0,0,0,.771,0l5.787-5.787a.545.545,0,1,0-.771-.771Z" transform="translate(495.755 2309.72)" fill="#fff"></path>
                        </g>
                    </svg>
                </div>
                The ability to turnaround consulting
            </li>
            <li>
                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <g id="Group_39197" data-name="Group 39197" transform="translate(-495.165 -2310.165)">
                            <rect id="Rectangle_1788" data-name="Rectangle 1788" width="18" height="18" rx="9" transform="translate(495.165 2310.165)" fill="#ee8d5a"></rect>
                            <path id="Path_2190" data-name="Path 2190" d="M6.657,11.566l-1.9-1.9a.545.545,0,1,0-.771.771l2.286,2.286a.545.545,0,0,0,.771,0l5.787-5.787a.545.545,0,1,0-.771-.771Z" transform="translate(495.755 2309.72)" fill="#fff"></path>
                        </g>
                    </svg>
                </div>
                Lorem ipsum dolor sit amet, consectetur adipiscing
            </li>
        </ul>
    </div>
</section>
Copy to clipboard

<section class="lists">
    <div class="container">
        <h2>List Style 2</h2>
        <ul class="list-style-2">
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="0 0 15 30">
                        <path id="Icon_ionic-md-arrow-dropright" data-name="Icon ionic-md-arrow-dropright" d="M13.5,9l15,15-15,15Z" transform="translate(-13.5 -9)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali qua. Ut enim ad minim veniam quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="0 0 15 30">
                        <path id="Icon_ionic-md-arrow-dropright" data-name="Icon ionic-md-arrow-dropright" d="M13.5,9l15,15-15,15Z" transform="translate(-13.5 -9)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="0 0 15 30">
                        <path id="Icon_ionic-md-arrow-dropright" data-name="Icon ionic-md-arrow-dropright" d="M13.5,9l15,15-15,15Z" transform="translate(-13.5 -9)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="0 0 15 30">
                        <path id="Icon_ionic-md-arrow-dropright" data-name="Icon ionic-md-arrow-dropright" d="M13.5,9l15,15-15,15Z" transform="translate(-13.5 -9)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
            </li>
        </ul>
    </div>
</section>
Copy to clipboard

<section class="lists">
    <div class="container">
        <h2>List Style 3</h2>
        <ul class="list-style-3">
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ali qua. Ut enim ad minim veniam quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            </li>
            <li>
                <span class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#E53637"></path>
                    </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
            </li>
        </ul>
    </div>
</section>
Copy to clipboard