SSC Atomic Classes and General Style Guide

Buttons

Font Styling and Overrides

Social Links

Copy Facebook Markup Copy Twitter Markup Copy YouTube Markup Copy LinkedIn Markup Copy Instagram Markup Copy Flicker Markup

Countdown Timer Example

class="jsCountdownText" (required)

This class turns the div into a countdown. Without it, nothing happens. You can add other classes next to it for styling, like class="jsCountdownText text-balanced fw-bold text-secondary mt-3". The text inside the div ("Countdown timer") is only a placeholder. The timer replaces it when the page loads.

data-date (required)

The date you are counting down to, written as YYYYMMDD with no dashes or slashes. December 15, 2026 is 20261215. If the date is missing, in the wrong format, or doesn't exist (like February 31), edit mode will show "Invalid date entered" alert in edit mode. Outside of edit mode, you will see nothing at all.

data-time (optional)

The time of day, in 24-hour format as HH:MM or HH:MM:SS. 9 a.m. is 09:00 and 5 p.m. is 17:00. If you leave it off, the countdown runs to 11:59:59 p.m. on the date, which is what you want for most deadlines. This is javascript, so the displayed time is the users browser/computers local time. 

data-event (optional)

The name of what you are counting down to. With data-event="Commencement", the timer reads "Only 78 Days, 12 Hours, and 5 Mins until Commencement." Without it, the timer ends with "remaining." instead.

data-expired (optional)

The text shown once the date and time have passed. If you leave it off, the timer shows "The date has passed." 

Example of Faux Table

This Faux table is for when you have half columns that should look like a table.

Example Heading

• Item 1: Item Info
• Item 2: Item Info
• Item 3: Item Info

Example Heading

• Item 1: Item Info
• Item 2: Item Info
• Item 3: Item Info
• Item 4: Item Info