ComponentsFeature Section
Hello Yumma UI! 🎉

Feature Section

Highlights key features, benefits, or capabilities in an engaging layout.

Basic Feature Section

Lightning fast

Optimized for speed with instant loading times and smooth interactions.

Secure by default

Enterprise-grade security built into every layer of the platform.

Fully customizable

Adapt every aspect to match your brand and workflow perfectly.

<div class="py-12 px-6">
   <div class="d-g gtc-3 g-8">
      <div class="d-f fd-c">
         <div class="d-f ai-c jc-c d-10 rad-2 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Lightning fast</h3>
         <p class="fs-sm tc-silver-10 m-0">Optimized for speed with instant loading times and smooth interactions.</p>
      </div>
      <div class="d-f fd-c">
         <div class="d-f ai-c jc-c d-10 rad-2 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Secure by default</h3>
         <p class="fs-sm tc-silver-10 m-0">Enterprise-grade security built into every layer of the platform.</p>
      </div>
      <div class="d-f fd-c">
         <div class="d-f ai-c jc-c d-10 rad-2 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Fully customizable</h3>
         <p class="fs-sm tc-silver-10 m-0">Adapt every aspect to match your brand and workflow perfectly.</p>
      </div>
   </div>
</div>

Centered

Lightning fast

Optimized for speed with instant loading times.

Secure by default

Enterprise-grade security built in.

Fully customizable

Adapt every aspect to your needs.

<div class="py-12 px-6">
   <div class="d-g gtc-3 g-8 ta-c">
      <div class="d-f fd-c ai-c">
         <div class="d-f ai-c jc-c d-12 rad-9 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Lightning fast</h3>
         <p class="fs-sm tc-silver-10 m-0">Optimized for speed with instant loading times.</p>
      </div>
      <div class="d-f fd-c ai-c">
         <div class="d-f ai-c jc-c d-12 rad-9 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Secure by default</h3>
         <p class="fs-sm tc-silver-10 m-0">Enterprise-grade security built in.</p>
      </div>
      <div class="d-f fd-c ai-c">
         <div class="d-f ai-c jc-c d-12 rad-9 bg-silver-2 tc-silver-9 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
         </div>
         <h3 class="ff-s fs-lg fw-600 tc-slate-10 mb-2">Fully customizable</h3>
         <p class="fs-sm tc-silver-10 m-0">Adapt every aspect to your needs.</p>
      </div>
   </div>
</div>