## Timestamp

### Basic Timestamp

January 21, 2026 at 10:30 AM

            <time class="timestamp" datetime="2026-01-21T10:30:00">
                January 21, 2026 at 10:30 AM
            </time>

### Elevated Timestamp

3 hours ago
January 21, 2026 at 8:00 AM

            <div class="timestamp-elevate">
                <div class="timestamp__container">
                    <time
                        class="timestamp__time-since"
                        datetime="2026-01-21T08:00:00"
                    >
                        3 hours ago
                    </time>
                    <button
                        class="timestamp__expand-button"
                        aria-label="Expand timestamp details"
                    ></button>
                </div>
                <div class="timestamp__details">
                    <time datetime="2026-01-21T08:00:00">
                        January 21, 2026 at 8:00 AM
                    </time>
                </div>
            </div>

### Active Timestamp

Just now

            <div class="timestamp-elevate">
                <div class="timestamp__container">
                    <time
                        class="timestamp__time-since timestamp__time-since--active"
                        datetime="2026-01-21T10:00:00"
                    >
                        Just now
                    </time>
                </div>
            </div>

### Expanded Timestamp

Yesterday
January 20, 2026 at 2:30 PM

            <div class="timestamp-elevate timestamp-elevate--expanded">
                <div class="timestamp__container">
                    <time
                        class="timestamp__time-since"
                        datetime="2026-01-20T14:30:00"
                    >
                        Yesterday
                    </time>
                    <button
                        class="timestamp__expand-button"
                        aria-label="Collapse timestamp details"
                    ></button>
                </div>
                <div class="timestamp__details" style="display: block">
                    <time datetime="2026-01-20T14:30:00">
                        January 20, 2026 at 2:30 PM
                    </time>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!