Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
s
The s element represents content that is no longer accurate or no longer relevant, displayed with a strikethrough line.
Description
The <s> element renders text with a strikethrough to indicate content that is no longer accurate or relevant, but should not be removed from the document. VB styles the line in var(--color-text-muted) for a subtle visual that doesn't dominate.
Unlike <del>, it does not indicate an edit to the document.
When to Use
- Price reductions: Show original price crossed out next to sale price
- Completed tasks: Cross off items in a to-do list
- Outdated information: Mark content that's no longer current
- Corrections: Show what was wrong alongside what's correct
- Expired offers: Indicate deals that are no longer available
When NOT to Use
- For document edits — use
<del>(which adds background color for editorial context) - Purely for decoration — use CSS
text-decoration: line-through
Examples
Basic strikethrough
<p><s>This information is outdated.</s></p>Price reduction
<p>Now only <s>$99.99</s> <strong>$79.99</strong>!</p>s vs del
| Element | Use Case | VB Styling |
|---|---|---|
<s> |
No longer accurate/relevant | Line-through with muted color |
<del> |
Removed from document (editorial) | Line-through + red background tint |
CSS Reference
s CSS
s { text-decoration: line-through; text-decoration-color: var(--color-text-muted);}Accessibility
- Most screen readers do not announce strikethrough — the visual is lost
- Add
visually-hiddencontext for critical information like pricing - Ensure surrounding text provides context for why content is struck through
Accessible Pricing Pattern
Accessible price reduction
<p>Price: <span class="visually-hidden">Was </span> <s>$99.99</s> <span class="visually-hidden">Now </span> $79.99</p>