Accordion Section.

 <!-- Accordion Section -->
        <section class="section">
            <h2>Accordions</h2>

            <!-- Basic Accordion -->
            <div class="accordion-showcase">
                <h3>Basic Accordion</h3>
                <div class="accordion">
                    <div class="accordion-item">
                        <button class="accordion-header">
                            <span>What is this UI Kit?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <p>This is a modern, minimal UI Kit based on the #F8F9FA color palette. It includes various components for building clean and professional web interfaces.</p>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <button class="accordion-header">
                            <span>How to use components?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <p>Simply copy the HTML structure and corresponding CSS classes. Each component is modular and can be customized to fit your needs.</p>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <button class="accordion-header">
                            <span>Is it responsive?</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="accordion-content">
                            <p>Yes, all components are fully responsive and work great on all devices, from mobile phones to desktop computers.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Last updated