Cards & tables

Cards are white, 8px radius, hairline border and --shadow-sm (DS-015). Tables take a secondary header row and 1px row lines. Chips follow the day-type colors (DS-019).

Cards

Define Tutoring Patterns

Tutoring periods meet on the same days each week, with no schedule variations.

Interactive

Hover lifts to --shadow-md.

Selected

Blue border and tint, like a chosen rotation pattern.

<div class="saga-card" style="flex:1;min-width:16rem">
	<h3>Define Tutoring Patterns</h3>
	<p>Tutoring periods meet on the same days each week, with no schedule variations.</p>
</div>
<div class="saga-card saga-card--interactive" style="flex:1;min-width:16rem">
	<h3>Interactive</h3>
	<p class="text-secondary">Hover lifts to <code>--shadow-md</code>.</p>
</div>
<div class="saga-card saga-card--interactive saga-card--selected" style="flex:1;min-width:16rem">
	<h3>Selected</h3>
	<p class="text-secondary">Blue border and tint, like a chosen rotation pattern.</p>
</div>

Header, body, footer

Q1 Math How often do you try to complete work on your own before asking for help?

<div class="saga-card" style="flex:1">
	<div class="saga-card__header">
		<h3 class="saga-card__title">Questions</h3>
		<button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="More"><iconify-icon icon="material-symbols-light:more-horiz"></iconify-icon></button>
	</div>
	<div class="saga-card__body">Q1 <span class="saga-chip saga-chip--neutral">Math</span> How often do you try to complete work on your own before asking for help?</div>
	<div class="saga-card__footer"><span class="text-secondary">5 questions</span><span style="margin-left:auto"><button class="saga-btn saga-btn--secondary saga-btn--sm">Export</button></span></div>
</div>

Title row and empty slot

.saga-card__title-row puts a heading and a control on one line; .saga-card--empty is the dashed placeholder slot ("Add Day Type"). Both sit in a two-column .saga-grid--2 --lg.

All Periods

A plain card whose heading shares a row with one control.

Add Day Type

<div class="saga-grid saga-grid--2 saga-grid--lg" style="width:100%">
	<div class="saga-card">
		<div class="saga-card__title-row"><h3>All Periods</h3><button class="saga-btn saga-btn--add saga-btn--sm"><span class="saga-btn__plus"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></span> Add period</button></div>
		<p class="text-secondary">A plain card whose heading shares a row with one control.</p>
	</div>
	<div class="saga-card saga-card--empty">
		<iconify-icon icon="material-symbols-light:add-rounded" class="saga-icon saga-icon--lg"></iconify-icon>
		<div>Add Day Type</div>
	</div>
</div>

Stat cards

Value first, then label, then caption, in a .saga-grid--stats (auto-fit, 220px minimum; .stat-grid is an alias).

0%Completion0 of 55 students

0SubmissionsResponses received

1LaunchesSessions the survey was launched in

<div class="saga-grid saga-grid--stats">
	<div class="saga-card saga-card--stat"><span class="saga-card__value">0%</span><span class="saga-card__label">Completion</span><span class="saga-card__caption">0 of 55 students</span></div>
	<div class="saga-card saga-card--stat"><span class="saga-card__value">0</span><span class="saga-card__label">Submissions</span><span class="saga-card__caption">Responses received</span></div>
	<div class="saga-card saga-card--stat"><span class="saga-card__value">1</span><span class="saga-card__label">Launches</span><span class="saga-card__caption">Sessions the survey was launched in</span></div>
</div>

Table

Display Name	Student ID	First Name	Last Name	Email	Sessions
Aaliyah L	sbx28-s21	Aaliyah	L	training-sbx28-s21@saga.org	12
Abigail J	sbx28-s19	Abigail	J	training-sbx28-s19@saga.org	9
Anwar B	571716	Anwar	Balogun	anwar716@saga.org	14

<div class="saga-table-wrap saga-scrollbar">
	<table class="saga-table saga-table--sticky">
		<thead><tr>
			<th class="saga-table__actions"><span class="sr-only">Actions</span></th>
			<th aria-sort="ascending">Display Name</th>
			<th aria-sort="none">Student ID</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email</th>
			<th class="num">Sessions</th>
		</tr></thead>
		<tbody>
			<tr>
				<td class="saga-table__actions"><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Edit"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Lock"><iconify-icon icon="material-symbols-light:lock-outline"></iconify-icon></button></td>
				<td>Aaliyah L</td><td>sbx28-s21</td><td>Aaliyah</td><td>L</td><td>training-sbx28-s21@saga.org</td><td class="num">12</td>
			</tr>
			<tr aria-selected="true">
				<td class="saga-table__actions"><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Edit"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Lock"><iconify-icon icon="material-symbols-light:lock-outline"></iconify-icon></button></td>
				<td>Abigail J</td><td>sbx28-s19</td><td>Abigail</td><td>J</td><td>training-sbx28-s19@saga.org</td><td class="num">9</td>
			</tr>
			<tr>
				<td class="saga-table__actions"><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Edit"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button><button class="saga-btn saga-btn--quiet saga-btn--icon" aria-label="Lock"><iconify-icon icon="material-symbols-light:lock-outline"></iconify-icon></button></td>
				<td>Anwar B</td><td>571716</td><td>Anwar</td><td>Balogun</td><td>anwar716@saga.org</td><td class="num">14</td>
			</tr>
		</tbody>
	</table>
</div>

Dense, grid lines, totals row

Day Types	Time	Duration
Regular	9:00 AM – 9:50 AM	50m
Advisory	8:50 AM – 9:30 AM	40m
Total this week		4h 10m

<table class="saga-table saga-table--dense saga-table--grid">
	<thead><tr><th>Day Types</th><th>Time</th><th class="num">Duration</th></tr></thead>
	<tbody>
		<tr><td><span class="saga-chip saga-chip--regular">Regular</span></td><td>9:00 AM – 9:50 AM</td><td class="num">50m</td></tr>
		<tr><td><span class="saga-chip saga-chip--advisory">Advisory</span></td><td>8:50 AM – 9:30 AM</td><td class="num">40m</td></tr>
	</tbody>
	<tfoot><tr><td colspan="2">Total this week</td><td class="num">4h 10m</td></tr></tfoot>
</table>

Empty state

Tutor	Students	Status
No sessions scheduled for this day.

<table class="saga-table">
	<thead><tr><th>Tutor</th><th>Students</th><th>Status</th></tr></thead>
	<tbody><tr><td colspan="3" class="saga-table__empty">No sessions scheduled for this day.</td></tr></tbody>
</table>

Outside a table the same message is a .saga-empty box: centred, dashed, with the one action that fills it.

No sessions scheduled Add a session or pick another day.

<div class="saga-empty">
	<span class="saga-empty__icon"><iconify-icon icon="material-symbols-light:event-busy-outline-rounded"></iconify-icon></span>
	<span class="saga-empty__title">No sessions scheduled</span>
	Add a session or pick another day.
	<button class="saga-btn saga-btn--secondary saga-btn--sm"><span class="saga-btn__plus"><iconify-icon icon="material-symbols-light:add-rounded"></iconify-icon></span> Add session</button>
</div>

List rows

A bordered row stack for editable things that are not quite a table (All Periods). --edge paints a 3px meaning edge from --_edge; --ghost dims by color and surface, never opacity.

Period 1 8:01 AM – 9:26 AM · Rm 409
Regular
Period 2 9:30 AM – 10:20 AM
Advisory
Period 3 Selected row
Period 4 No sessions this week

<ul class="saga-list saga-list--interactive" style="width:100%">
	<li class="saga-list__row saga-list__row--edge" style="--_edge: var(--chip-regular)">
		<span class="saga-list__handle"><iconify-icon icon="material-symbols-light:drag-indicator"></iconify-icon></span>
		<div class="saga-list__main"><span class="saga-list__title">Period 1</span> <span class="saga-list__meta">8:01 AM – 9:26 AM · Rm 409</span></div>
		<span class="saga-chip saga-chip--regular saga-chip--square">Regular</span>
		<div class="saga-list__end"><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Edit Period 1"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Delete Period 1"><iconify-icon icon="material-symbols-light:delete-outline-rounded"></iconify-icon></button></div>
	</li>
	<li class="saga-list__row saga-list__row--edge" style="--_edge: var(--chip-advisory)">
		<span class="saga-list__handle"><iconify-icon icon="material-symbols-light:drag-indicator"></iconify-icon></span>
		<div class="saga-list__main"><span class="saga-list__title">Period 2</span> <span class="saga-list__meta">9:30 AM – 10:20 AM</span></div>
		<span class="saga-chip saga-chip--advisory saga-chip--square">Advisory</span>
		<div class="saga-list__end"><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Edit Period 2"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Delete Period 2"><iconify-icon icon="material-symbols-light:delete-outline-rounded"></iconify-icon></button></div>
	</li>
	<li class="saga-list__row" aria-selected="true">
		<span class="saga-list__handle"><iconify-icon icon="material-symbols-light:drag-indicator"></iconify-icon></span>
		<div class="saga-list__main"><span class="saga-list__title">Period 3</span> <span class="saga-list__meta">Selected row</span></div>
		<div class="saga-list__end"><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Edit Period 3"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button></div>
	</li>
	<li class="saga-list__row saga-list__row--ghost">
		<span class="saga-list__handle"><iconify-icon icon="material-symbols-light:drag-indicator"></iconify-icon></span>
		<div class="saga-list__main"><span class="saga-list__title">Period 4</span> <span class="saga-list__meta">No sessions this week</span></div>
		<div class="saga-list__end"><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Edit Period 4"><iconify-icon icon="material-symbols-light:edit-outline-rounded"></iconify-icon></button></div>
	</li>
</ul>

Charts

Bars without a chart library (DS-119): a --chart-neutral track, fills colored by --_c and sized by --value, a --chart-reference mark, an axis row and a legend. Averages stay --chart-average; a reference mark is darker because it must hold 3:1 over the gray track.

Survey completion34 of 55 · target 44

0%50%100%

Attendance this week212 marks

Present
Tardy
Absent
Not yet marked
Target
Average

<div style="width:100%;display:grid;gap:var(--space-md)">
	<div>
		<div class="saga-card__title-row"><span class="saga-card__label">Survey completion</span><span class="text-secondary">34 of 55 · target 44</span></div>
		<div class="saga-bar" role="img" aria-label="62% complete, target 80%"><div class="saga-bar__fill" style="--value:62%"></div><div class="saga-bar__mark" style="--value:80%"></div></div>
		<div class="saga-axis"><span>0%</span><span>50%</span><span>100%</span></div>
	</div>
	<div>
		<div class="saga-card__title-row"><span class="saga-card__label">Attendance this week</span><span class="text-secondary">212 marks</span></div>
		<div class="saga-bar saga-bar--stacked saga-bar--lg" role="img" aria-label="71% present, 12% tardy, 9% absent, 8% not yet marked"><div class="saga-bar__fill" style="--value:71%;--_c:var(--chart-1)"></div><div class="saga-bar__fill" style="--value:12%;--_c:var(--chart-4)"></div><div class="saga-bar__fill" style="--value:9%;--_c:var(--chart-6)"></div></div>
	</div>
	<ul class="saga-legend">
		<li class="saga-legend__item"><span class="saga-legend__swatch" style="--_c:var(--chart-1)"></span> Present</li>
		<li class="saga-legend__item"><span class="saga-legend__swatch" style="--_c:var(--chart-4)"></span> Tardy</li>
		<li class="saga-legend__item"><span class="saga-legend__swatch" style="--_c:var(--chart-6)"></span> Absent</li>
		<li class="saga-legend__item"><span class="saga-legend__swatch" style="--_c:var(--chart-neutral)"></span> Not yet marked</li>
		<li class="saga-legend__item"><span class="saga-legend__swatch saga-legend__swatch--line" style="--_c:var(--chart-reference)"></span> Target</li>
		<li class="saga-legend__item"><span class="saga-legend__swatch saga-legend__swatch--line" style="--_c:var(--chart-average)"></span> Average</li>
	</ul>
</div>

Key-value list

Tutoring Period: Period 1 – Rm 409
When: Tue, Dec 9 Regular
Time: 8:01 AM – 9:26 AM
Duration: 1:25:00

District: Saga SC Sandbox 28
Program: Demo Program 08/17

<dl class="saga-kv">
	<dt>Tutoring Period</dt><dd>Period 1 – Rm 409</dd>
	<dt>When</dt><dd>Tue, Dec 9 <span class="saga-chip saga-chip--regular">Regular</span></dd>
	<dt>Time</dt><dd>8:01 AM – 9:26 AM</dd>
	<dt>Duration</dt><dd>1:25:00</dd>
</dl>
<dl class="saga-kv saga-kv--stacked">
	<dt>District</dt><dd>Saga SC Sandbox 28</dd>
	<dt>Program</dt><dd>Demo Program 08/17</dd>
</dl>

Chips and badges

Regular Advisory Period 1 – Rm 409 Math Default Regular Advisory

<span class="saga-chip saga-chip--regular">Regular</span>
<span class="saga-chip saga-chip--advisory">Advisory</span>
<span class="saga-chip saga-chip--primary">Period 1 – Rm 409</span>
<span class="saga-chip saga-chip--neutral">Math</span>
<span class="saga-chip">Default</span>
<span class="saga-chip saga-chip--regular saga-chip--square">Regular</span>
<span class="saga-chip saga-chip--advisory saga-chip--square">Advisory</span>

Positive Relationships Cognitive Lift Differentiation and Scaffolding Not Started

<span class="saga-chip saga-chip--outline">Positive Relationships</span>
<span class="saga-chip saga-chip--outline"><iconify-icon icon="material-symbols-light:star-rounded"></iconify-icon> Cognitive Lift</span>
<span class="saga-chip saga-chip--outline is-active">Differentiation and Scaffolding</span>
<span class="saga-chip saga-chip--outline" style="color:var(--color-success)">Not Started</span>

2 19 55 !

<span class="saga-badge">2</span>
<span class="saga-badge saga-badge--primary">19</span>
<span class="saga-badge saga-badge--neutral">55</span>
<span class="saga-badge saga-badge--attention">!</span>
<span class="saga-badge-anchor"><iconify-icon class="saga-icon saga-icon--lg" icon="material-symbols-light:notifications-outline-rounded"></iconify-icon><span class="saga-badge">2</span></span>

Calendar

Month grid. A cell with sessions fills its event block blue; out-of-month days are muted, and the same block in a past or future month takes the blue tint.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

28 Regular

29 Regular

30 Regular

1 Regular

2 Advisory

5 Regular

6 Regular

7 Regular

8 Regular

9 Advisory

<div class="saga-calendar__nav">
	<button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Previous month"><iconify-icon icon="material-symbols-light:chevron-left-rounded"></iconify-icon></button>
	<span class="saga-calendar__month">October 2026</span>
	<button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm" aria-label="Next month"><iconify-icon icon="material-symbols-light:chevron-right-rounded"></iconify-icon></button>
</div>
<div class="saga-calendar" role="grid" aria-label="October 2026">
	<div class="saga-calendar__weekday">Sun</div><div class="saga-calendar__weekday">Mon</div><div class="saga-calendar__weekday">Tue</div><div class="saga-calendar__weekday">Wed</div><div class="saga-calendar__weekday">Thu</div><div class="saga-calendar__weekday">Fri</div><div class="saga-calendar__weekday">Sat</div>
	<div class="saga-calendar__cell saga-calendar__cell--outside"><div class="saga-calendar__day"><span>27</span></div></div>
	<div class="saga-calendar__cell saga-calendar__cell--outside saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>28</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">18 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--outside saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>29</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">19 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--outside saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>30</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">18 sessions</a></div>
	<div class="saga-calendar__cell"><div class="saga-calendar__day"><span>1</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">20 sessions</a></div>
	<div class="saga-calendar__cell"><div class="saga-calendar__day"><span>2</span> <span class="saga-chip saga-chip--advisory saga-chip--square">Advisory</span></div><a class="saga-calendar__event" href="#">19 sessions</a></div>
	<div class="saga-calendar__cell"><div class="saga-calendar__day"><span>3</span></div></div>
	<div class="saga-calendar__cell"><div class="saga-calendar__day"><span>4</span></div></div>
	<div class="saga-calendar__cell saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>5</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">18 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>6</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">18 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--has-sessions saga-calendar__cell--today"><div class="saga-calendar__day"><span>7</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">21 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>8</span> <span class="saga-chip saga-chip--regular saga-chip--square">Regular</span></div><a class="saga-calendar__event" href="#">20 sessions</a></div>
	<div class="saga-calendar__cell saga-calendar__cell--has-sessions"><div class="saga-calendar__day"><span>9</span> <span class="saga-chip saga-chip--advisory saga-chip--square">Advisory</span></div><a class="saga-calendar__event" href="#">18 sessions</a></div>
	<div class="saga-calendar__cell"><div class="saga-calendar__day"><span>10</span></div></div>
</div>