Lists

List Style 1

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
  • Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
  • Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore 
                        
<ul class="list-style-1">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                    <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                </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="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                    <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                </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="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                    <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                </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="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                    <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                </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="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                    <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>

List Style 2

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
  • Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
  • Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore 
                        
<ul class="list-style-2">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="149.999" viewBox="0 0 150 149.999">
                    <path data-name="Exclusion 16" d="M75,150A75.019,75.019,0,0,1,45.807,5.9a75.019,75.019,0,0,1,58.386,138.212A74.53,74.53,0,0,1,75,150Zm0-87.93h0L112.4,97.5l7.6-9.823L78.8,48.658,75,45l-3.8,3.657L30,87.677,37.6,97.5,75,62.071Z" transform="translate(-0.001 -0.002)" fill="#0a2046"/>
                </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="149.999" viewBox="0 0 150 149.999">
                    <path data-name="Exclusion 16" d="M75,150A75.019,75.019,0,0,1,45.807,5.9a75.019,75.019,0,0,1,58.386,138.212A74.53,74.53,0,0,1,75,150Zm0-87.93h0L112.4,97.5l7.6-9.823L78.8,48.658,75,45l-3.8,3.657L30,87.677,37.6,97.5,75,62.071Z" transform="translate(-0.001 -0.002)" fill="#0a2046"/>
                </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="149.999" viewBox="0 0 150 149.999">
                    <path data-name="Exclusion 16" d="M75,150A75.019,75.019,0,0,1,45.807,5.9a75.019,75.019,0,0,1,58.386,138.212A74.53,74.53,0,0,1,75,150Zm0-87.93h0L112.4,97.5l7.6-9.823L78.8,48.658,75,45l-3.8,3.657L30,87.677,37.6,97.5,75,62.071Z" transform="translate(-0.001 -0.002)" fill="#0a2046"/>
                </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="149.999" viewBox="0 0 150 149.999">
                    <path data-name="Exclusion 16" d="M75,150A75.019,75.019,0,0,1,45.807,5.9a75.019,75.019,0,0,1,58.386,138.212A74.53,74.53,0,0,1,75,150Zm0-87.93h0L112.4,97.5l7.6-9.823L78.8,48.658,75,45l-3.8,3.657L30,87.677,37.6,97.5,75,62.071Z" transform="translate(-0.001 -0.002)" fill="#0a2046"/>
                </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="149.999" viewBox="0 0 150 149.999">
                    <path data-name="Exclusion 16" d="M75,150A75.019,75.019,0,0,1,45.807,5.9a75.019,75.019,0,0,1,58.386,138.212A74.53,74.53,0,0,1,75,150Zm0-87.93h0L112.4,97.5l7.6-9.823L78.8,48.658,75,45l-3.8,3.657L30,87.677,37.6,97.5,75,62.071Z" transform="translate(-0.001 -0.002)" fill="#0a2046"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>

List Style 3

  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
  • Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia id est laborum.
  • Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore 
                        
<ul class="list-style-3">
    <li>
        <div>
            <div class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                    <circle cx="75" cy="75" r="75" fill="#f9593a"/>
                </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="150" viewBox="0 0 150 150">
                    <circle cx="75" cy="75" r="75" fill="#f9593a"/>
                </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="150" viewBox="0 0 150 150">
                    <circle cx="75" cy="75" r="75" fill="#f9593a"/>
                </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="150" viewBox="0 0 150 150">
                    <circle cx="75" cy="75" r="75" fill="#f9593a"/>
                </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="150" viewBox="0 0 150 150">
                    <circle cx="75" cy="75" r="75" fill="#f9593a"/>
                </svg>
            </div>
            <div class="content">
                Nihil molestiaeconsequatur, vel illum qui doloremenim ipsam voluptate dolore
            </div>
        </div>
    </li>
</ul>