# Sidebar Widgets as Cards (SCSS)

> Styles each sidebar widget as a card with a border, rounded corners, an underlined title and tidy list dividers.

- Type: SCSS
- Runs: Site-wide header
- Category: [Widgets](https://wpide.com/library/category/widgets/)
- Tags: scss, widgets, sidebar
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/sidebar-widget-cards-scss/

## Code

```scss
$card-radius: 8px;
$card-padding: 1.25rem;
$divider: rgba(0, 0, 0, 0.1);

#secondary .widget,
.widget-area .widget,
.sidebar .widget {
    margin-bottom: 1.5rem;
    padding: $card-padding;
    border: 1px solid $divider;
    border-radius: $card-radius;
    background: var(--wp--preset--color--base, #fff);

    .widget-title,
    .widgettitle {
        margin-top: 0;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid currentColor;
        font-size: 1rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    ul {
        margin: 0;
        padding-left: 0;
        list-style: none;

        li {
            padding: 0.4rem 0;
            border-bottom: 1px solid $divider;

            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
```

## Notes

Adjust the variables at the top. Selectors cover the usual classic theme sidebar classes.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Sidebar Widgets as Cards (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/