Settings Section Card

Organize your application's settings into logical groups with this clean and well-structured section card.

This component is a "container" card, designed to wrap around a set of related settings or form controls. It's an excellent approach for creating a user-friendly and easy-to-navigate settings page.

Screenshot of a card that acts as a container for user settings.

Get Source Code Preview

About this Component

The card is divided into a header, a body, and a footer. These are three distinct zones. The header provides a title and description for the settings group (e.g., "General Settings"). The body is the flexible area where you can place individual setting items, like the text input, select dropdown, and toggle switch shown in the example. The footer is designed to hold the primary actions for the section, such as a "Save Changes" button.

Features

Structured Layout: The header, body, and footer structure provides a clear and organized way to present a group of settings.
Flexible Content Area: The card body can hold any number of setting items, such as text inputs, select menus, or custom components like the Settings Toggle Card.
Clear Action Area: The distinct footer, often styled with a different background color, makes the primary "Save" action unmissable.

Code Breakdown

HTML Structure

The entire component is a semantic section. This is the appropriate element for a thematic grouping of content. The section is then divided into a header, a div for the main body content, and a footer for the save button. Each individual option within the body is a div with the class .setting-item. This container holds the option's label and description on one side, and the interactive form element (e.g., input, select) on the other.

CSS Styling

The component's styling primarily focuses on creating clear visual separation between the different parts. Simple borders are used to divide the header, body items, and footer. The .setting-item class is a Flexbox container with justify-content: space-between, which neatly pushes the setting's label to the left and its corresponding form control to the right.

Code

Here's the complete, self-contained code. You can easily build out a settings page by adding your own form controls into the .settings-section-body.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-settings {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}

/* === Settings Section Card Styles === */
.settings-section-card {
    --settings-radius: 12px;
    --settings-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--settings-radius);
    box-shadow: var(--settings-shadow);
}

.settings-section-header {
    padding: 1.5rem 1.5rem 1rem;
}
.settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.settings-section-description {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
}

/* Body contains the settings/form elements */
.settings-section-body {
    padding: 0.5rem 0; /* Vertical padding */
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.settings-section-body .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
}
.settings-section-body .setting-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}

.setting-item-content {
    flex-grow: 1;
}
.setting-item-label {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    display: block; /* To allow margin */
}
.setting-item-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

.setting-item-action {
    flex-shrink: 0;
}
/* Styles for placeholder form elements */
.setting-item-action .text-input {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 200px;
}
.setting-item-action .select-input {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #ffffff;
}

/* Toggle Switch styles */
.stc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.stc-toggle-switch input { opacity: 0; width: 0; height: 0; }
.stc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.stc-toggle-slider:before {
    position: absolute; content: ""; height: 18px; width: 18px;
    left: 3px; bottom: 3px; background-color: white;
    transition: .4s; border-radius: 50%;
}
input:checked + .stc-toggle-slider { background-color: #4f46e5; }
input:focus-visible + .stc-toggle-slider { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5; }
input:checked + .stc-toggle-slider:before { transform: translateX(20px); }

/* Footer */
.settings-section-footer {
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    text-align: right;
}
.settings-save-btn {
    background-color: #4f46e5;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.settings-save-btn:hover {
    background-color: #4338ca;
}

</style>

<div class="demo-container-settings">
    <section class="settings-section-card">
        <header class="settings-section-header">
            <h2 class="settings-section-title">General Settings</h2>
            <p class="settings-section-description">Manage your primary account settings.</p>
        </header>
        <div class="settings-section-body">
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="username" class="setting-item-label">Username</label>
                    <p class="setting-item-description">This will be your public display name.</p>
                </div>
                <div class="setting-item-action">
                    <input type="text" id="username" class="text-input" value="elara_ux">
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="language" class="setting-item-label">Language</label>
                    <p class="setting-item-description">Choose your preferred language for the interface.</p>
                </div>
                <div class="setting-item-action">
                    <select id="language" class="select-input">
                        <option>English (US)</option>
                        <option>Español</option>
                        <option>日本語</option>
                    </select>
                </div>
            </div>
            <div class="setting-item">
                <div class="setting-item-content">
                    <label for="toggle-dark" class="setting-item-label">Dark Mode</label>
                    <p class="setting-item-description">Enable the dark color scheme for reduced eye strain.</p>
                </div>
                <div class="setting-item-action">
                    <label class="stc-toggle-switch">
                        <input type="checkbox" id="toggle-dark" checked>
                        <span class="stc-toggle-slider"></span>
                    </label>
                </div>
            </div>
        </div>
        <footer class="settings-section-footer">
            <button class="settings-save-btn">Save Changes</button>
        </footer>
    </section>
</div>

View Output