# Vertical Timeline Style for Groups (SCSS)

> Turns the blocks inside a Group with the class "wpide-timeline" into a vertical timeline with a line and a dot for each step, for histories, roadmaps and processes.

- Type: SCSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: timeline, layout, design, scss
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-timeline-scss/

## Code

```scss
$timeline-color: #2271b1;
$timeline-line: 2px;
$timeline-dot: 14px;
$timeline-indent: 2rem;

.wpide-timeline {
    position: relative;
    padding-left: $timeline-indent !important;

    &::before {
        content: "";
        position: absolute;
        top: .4em;
        bottom: .4em;
        left: calc(#{$timeline-dot} / 2 - #{$timeline-line} / 2);
        width: $timeline-line;
        background: rgba($timeline-color, .3);
    }

    > * {
        position: relative;
        margin-bottom: 1.75rem;

        &::before {
            content: "";
            position: absolute;
            top: .35em;
            left: -$timeline-indent;
            width: $timeline-dot;
            height: $timeline-dot;
            border-radius: 50%;
            background: $timeline-color;
            box-shadow: 0 0 0 4px rgba($timeline-color, .15);
        }
    }
}
```

## Notes

Put one Group (or heading + paragraph pair wrapped in a Group) per step inside the timeline Group.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Vertical Timeline Style for Groups (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/