Skip to content
STYLESCAPE

Gantt

Examples for the ss-c-gantt module: a horizontal track timeline. The container sets --ss-gantt-columns (time steps) and --ss-gantt-today (a 0-based, fractional column offset for the today line); each bar sets --start (1-based column) and --span. ARIA table roles keep rows, labels and the period readable for screen readers; say the dates in the bar's text or aria-label. For the vertical story layout, see the timeline module.

Project plan 2026

Task
Design
Jan – Apr
Survey
Jan – Feb, done
Concept design
Feb – Apr
Permit
May – Sep, delayed
Construction
Aug – Oct Nov – Dec
HTML 
<div class="ss-c-gantt" role="table" aria-label="Project plan 2026; today is 8 October" style="--ss-gantt-columns: 12; --ss-gantt-today: 9.25">
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="columnheader">Task</span>
                <div class="ss-c-gantt__scale" role="columnheader" aria-label="Months January to December">
                    <span class="ss-c-gantt__tick" aria-hidden="true">Jan</span><span class="ss-c-gantt__tick" aria-hidden="true">Feb</span><span class="ss-c-gantt__tick" aria-hidden="true">Mar</span><span class="ss-c-gantt__tick" aria-hidden="true">Apr</span><span class="ss-c-gantt__tick" aria-hidden="true">May</span><span class="ss-c-gantt__tick" aria-hidden="true">Jun</span><span class="ss-c-gantt__tick" aria-hidden="true">Jul</span><span class="ss-c-gantt__tick" aria-hidden="true">Aug</span><span class="ss-c-gantt__tick" aria-hidden="true">Sep</span><span class="ss-c-gantt__tick" aria-hidden="true">Oct</span><span class="ss-c-gantt__tick" aria-hidden="true">Nov</span><span class="ss-c-gantt__tick" aria-hidden="true">Dec</span>
                </div>
            </div>
            <div class="ss-c-gantt__row ss-c-gantt__row--group" role="row">
                <span class="ss-c-gantt__label" role="rowheader">Design</span>
                <div class="ss-c-gantt__track" role="cell"><span class="ss-c-gantt__bar ss-c-gantt__bar--outline" style="--start: 1; --span: 4">Jan – Apr</span></div>
            </div>
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="rowheader">Survey</span>
                <div class="ss-c-gantt__track" role="cell"><span class="ss-c-gantt__bar ss-c-gantt__bar--success" style="--start: 1; --span: 2">Jan – Feb, done</span></div>
            </div>
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="rowheader">Concept design</span>
                <div class="ss-c-gantt__track" role="cell"><span class="ss-c-gantt__bar" style="--start: 2; --span: 3">Feb – Apr</span></div>
            </div>
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="rowheader">Permit</span>
                <div class="ss-c-gantt__track" role="cell">
                    <span class="ss-c-gantt__bar ss-c-gantt__bar--warning" style="--start: 5; --span: 5">May – Sep, delayed</span>
                    <span class="ss-c-gantt__milestone ss-c-gantt__milestone--error" style="--start: 11" role="img" aria-label="Milestone: permit decision, 1 November"></span>
                </div>
            </div>
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="rowheader">Construction</span>
                <div class="ss-c-gantt__track" role="cell">
                    <span class="ss-c-gantt__bar ss-c-gantt__bar--info" style="--start: 8; --span: 3">Aug – Oct</span>
                    <span class="ss-c-gantt__bar ss-c-gantt__bar--outline" style="--start: 11; --span: 2">Nov – Dec</span>
                </div>
            </div>
        </div>

Weekly scale, narrow labels

Who
Anna
API, Mon – Wed
Bram
Frontend, Tue – Fri
HTML 
<div class="ss-c-gantt" role="table" aria-label="Sprint 42" style="--ss-gantt-columns: 5; --ss-gantt-label-width: 6rem; --ss-gantt-min-width: 24rem">
            <div class="ss-c-gantt__row" role="row">
                <span class="ss-c-gantt__label" role="columnheader">Who</span>
                <div class="ss-c-gantt__scale" role="columnheader" aria-label="Monday to Friday"><span class="ss-c-gantt__tick" aria-hidden="true">Mon</span><span class="ss-c-gantt__tick" aria-hidden="true">Tue</span><span class="ss-c-gantt__tick" aria-hidden="true">Wed</span><span class="ss-c-gantt__tick" aria-hidden="true">Thu</span><span class="ss-c-gantt__tick" aria-hidden="true">Fri</span></div>
            </div>
            <div class="ss-c-gantt__row" role="row"><span class="ss-c-gantt__label" role="rowheader">Anna</span><div class="ss-c-gantt__track" role="cell"><span class="ss-c-gantt__bar" style="--start: 1; --span: 3">API, Mon – Wed</span></div></div>
            <div class="ss-c-gantt__row" role="row"><span class="ss-c-gantt__label" role="rowheader">Bram</span><div class="ss-c-gantt__track" role="cell"><span class="ss-c-gantt__bar ss-c-gantt__bar--success" style="--start: 2; --span: 4">Frontend, Tue – Fri</span></div></div>
        </div>