ComponentsAccordion
Hello Yumma UI! 🎉

Accordion

Displays collapsible content sections that expand and collapse on user interaction.

Basic Accordion

Is Yumma CSS free?

Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.

Can I use it with React?

Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.

Is Yumma UI mobile friendly?

Yes, Yumma UI is be fully responsive and works great on all devices.

<div class="d-f fd-c">
   <details class="b-1 bc-silver-2 rad-t-1 bb-none">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Is Yumma CSS free?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.
      </div>
   </details>
   <details class="b-1 bt-0 bc-silver-2">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Can I use it with React?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.
      </div>
   </details>
   <details open class="b-1 bt-0 bc-silver-2 rad-b-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Is Yumma UI mobile friendly?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma UI is mobile-friendly and works great on all devices.
      </div>
   </details>
</div>

Separated

Is Yumma CSS free?

Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.

Can I use it with React?

Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.

Is Yumma UI mobile friendly?

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c g-2">
   <details class="b-1 bc-silver-2 rad-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Is Yumma CSS free?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.
      </div>
   </details>
   <details open class="b-1 bc-silver-2 rad-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Can I use it with React?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.
      </div>
   </details>
</div>

Ghost

Is Yumma CSS free?

Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.

Can I use it with React?

Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.

Is Yumma UI mobile friendly?

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c">
   <details class="bb-1 bc-silver-2">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Is Yumma CSS free?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.
      </div>
   </details>
   <details class="bb-1 bc-silver-2">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Can I use it with React?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.
      </div>
   </details>
   <details open class="bb-1 bc-silver-2">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <b class="tc-slate">Is Yumma UI mobile friendly?</b>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma UI is mobile-friendly and works great on all devices.
      </div>
   </details>
</div>

Icons

Is Yumma CSS free?

Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.

Can I use it with React?

Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.

Is Yumma UI mobile friendly?

Yes, Yumma UI is mobile-friendly and works great on all devices.

<div class="d-f fd-c g-2">
   <details class="b-1 bc-silver-2 rad-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
            <b class="tc-slate">Is Yumma CSS free?</b>
         </div>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma CSS is completely free and open-source. You can use it in personal and commercial projects.
      </div>
   </details>
   <details class="b-1 bc-silver-2 rad-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
            <b class="tc-slate">Can I use it with React?</b>
         </div>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Absolutely! Yumma CSS is framework-agnostic and works perfectly with React, Vue, Svelte, and vanilla HTML.
      </div>
   </details>
   <details open class="b-1 bc-silver-2 rad-1">
      <summary class="p-4 c-p d-f jc-sb ai-c lst-none fw-600">
         <div class="d-f ai-c g-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tc-slate-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
            <b class="tc-slate">Is Yumma UI mobile friendly?</b>
         </div>
         <svg xmlns="http://www.w3.org/2000/svg" class="fs-lg tc-slate-8 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </summary>
      <div class="px-4 pb-4 tc-slate fs-sm lh-4">
         Yes, Yumma UI is mobile-friendly and works great on all devices.
      </div>
   </details>
</div>