List

<ul class="t1 flex flex-col align-items-stretch"> <li class="t1 flex align-items-start"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> </ul>

<ul class="t1 flex flex-col align-items-stretch"> <li class="t1 flex align-items-start"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> </ul>

<ul class="t1 flex flex-col align-items-stretch color-text"> <li class="t1 flex align-items-center"> <div class="t1 flex-none flex flex-center w-16 h-16 bg-c-brand-500 rounded-3"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-center mt-2"> <div class="t1 flex-none flex flex-center w-16 h-16 bg-c-brand-500 rounded-3"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-center mt-2"> <div class="t1 flex-none flex flex-center w-16 h-16 bg-c-gray-100 b-1-gray-200 rounded-3"> </div> <div class="t1 flex-1 font-16 line-24px ml-8">Lorem ipsum</div> </li> </ul>

<ul class="t1 flex flex-col align-items-stretch"> <li class="t1 flex align-items-start"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16.88 9.097A4.002 4.002 0 0116 17H5a5 5 0 01-.998-9.9 3 3 0 014.516-2.688 5 5 0 018.361 4.685z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Cloud</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-orange-100 rounded-full"> <svg class="t1 w-12 h-12 fill-orange" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 10V2l2-2h8l10 10-10 10L0 10zm4.5-4a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Tag</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-red-100 rounded-full"> <svg class="t1 w-12 h-12 fill-red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3.22l-.61-.6a5.5 5.5 0 00-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 00-7.78-7.77l-.61.61z"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Love</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-green-100 rounded-full"> <svg class="t1 w-12 h-12 fill-green" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Success</div> </li> </ul>

<ul class="t1 flex flex-col align-items-stretch"> <li class="t1 flex align-items-start"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex flex-col align-items-start mt-4"> <div class="t1 flex mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </div> <ul class="t1 flex flex-col align-items-stretch ml-28 my-4"> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-blue-100 rounded-full"> <svg class="t1 w-12 h-12 fill-blue" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> </ul> </li> <li class="t1 flex align-items-start mt-4"> <div class="t1 flex-none flex flex-center w-20 h-20 my-2 bg-c-brand-500 rounded-full"> <svg class="t1 w-12 h-12 fill-white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" fill-rule="evenodd"/></svg> </div> <div class="t1 flex-1 color-brand-700 font-16 line-24px ml-8">Lorem ipsum</div> </li> </ul>