Garlic bread with cheese: What the science tells us
For years parents have espoused the health benefits of eating garlic bread…
…
…
…
…
```
### Using inline SVG[](#using-inline-svg)
Inline SVG doesn’t support the `alt` attribute, so instead add two wai-aria attributes: `role="img"` and `aria-label="The alt-text."`:
```html
```
* * *
This content was adapted from [Axess Lab](https://axesslab.com/alt-texts/).
---
### Page: Accessibility
URL: https://stackoverflow.design/system/accessibility/intro
Date: 2026-08-13T14:42:32.952Z
description: A non-comprehensive guide to accessibility best practices when using Stacks.
Content:
## Target[](#target)
All Stack Overflow product UIs must conform to the AA conformance level of the Web Content Accessibility Guidelines (WCAG) 2.2 with a few exceptions around color contrast documented below.
### High contrast modes[](#high-contrast-modes)
When high contrast mode is enabled, Stack Overflow product UIs must meet or exceed the [Success Criterion 1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG22/#contrast-enhanced) of the [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) and should conform to the remaining [AAA conformance level rules](https://www.w3.org/TR/WCAG22/#cc1) when reasonably achievable. This only applies to the subset of Stack Overflow products that provide high contrast modes. **Note: not all Stack Overflow products are expected to support high contrast modes**.
## Visual accessibility[](#visual-accessibility)
Stack Overflow product UIs MUST conform to a custom conformance level of the Accessible Perceptual Contrast Algorithm (APCA). This custom conformance level replaces the [AA conformance level](https://www.w3.org/TR/WCAG22/#cc1) of the [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) for color contrast.
### Color & contrast[](#color--contrast)
Stacks aims to equip you with an accessible color palette and has been tested against WCAG AA, WCAG AAA and the newer APCA color standards. Most of our color combinations meet WCAG AA and APCA levels defined below. We also offer high contrast mode which offers a greater level of contrast.
#### Contrast ratios[](#contrast-ratios)
Contrast is the difference in luminance or color between any two elements. All visual readers require ample luminance contrast for fluent readability. Stack Overflow products must conform to a custom conformance level of the Accessible Perceptual Contrast Algorithm (APCA). Based on our custom conformance level, all text must have a Lightness contrast (Lc) value of 60, body copy must have a Lc value of 75, icons must have a Lc value of 45, and placeholder and disabled text must have a Lc of 30. These numbers will be negative when calculating for dark mode.
#### Don't
Use low luminance contrast that fails our standards.
Button
Robotics
#### Do
Use luminance contrast that meets our standards as defined above.
Button
Robotics
#### Visual cues[](#visual-cues)
Visual readers with color vision deficiency (CVD) have problems differentiating some hues and therefore these users need help discerning differences between items. This means that color (hue) should never be the sole means of communicating information and should always be paired with a non-color dependent indicator to accommodate all visual users.
#### Don't
Use color alone to convey meaning.
#### Do
Use an icon alongside color to convey meaning.
## Focus states[](#focus-states)
Some people navigate through a website by using a keyboard or other device (instead of a mouse). A focus state should clearly let users know which item they’re on and is ready to interact with. Stack’s has taken a hybrid approach in using both the browser’s default styles (smaller interactive components like text links) and a custom focus ring.
### Foundation for custom approach[](#foundation-for-custom-approach)
The custom approach adds two different outline rings on the inside of the component. The outer ring color uses `secondary-theme-400` (matching the primary button color) and the inner ring color uses `white` (matching the background).
Button
Default
Button
Focus
The outer ring color will always display as the theme color even when applied to a `muted` or `danger` styled button. This ensures the focus ring maintains a 3:1 color contrast ratio for any adjacent colors (WCAG level AA) within any theme (assuming the `secondary-theme` color already passes the 3:1 contrast ratio).
Button
Tonal default
Button
Tonal focus
Button
Danger filled default
Button
Danger filled focus
### Meeting level AAA[](#meeting-level-aaa)
Both focus rings are always 2px thick. This allows the focus state to meet [WCAG 2.4.13 Focus Appearance (AAA)](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html) standards for High Contrast mode. Whenever possible, the rings should be added to the inside of the component so we can better ensure that the rings don’t get accidentally cut off by the surrounding layout (which helps us to meet [WCAG 2.4.11 Focus Not Obscured AA](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)). However, this does result in a padding reduction within the element, surrounding the text. When choosing to set the focus rings on the inside (inset), the component must have at least 4px of padding at the smallest size. This has been applied to buttons, button groups, navigation, pagination and topbar.
When the padding amount is not sufficient enough to support a double ring on the inside of the component, the rings are placed on the outside. The components included are tags, toggles, form elements (input fields, selects, radio/checkboxes…), block links and the editor.
javascript
Tag default
javascript
Tag focus
Toggle default
Toggle focused
### Consistent style patterns[](#consistent-style-patterns)
#### Filled[](#filled)
Any component that already has an existing background color that fills the shape will maintain its original fill color.
* [Product](#)
Navigation active default
* [Product](#)
Navigation active focus
Off Weekly
Toggle (multi) default
Off Weekly
Toggle (multi) focused
#### Bordered[](#bordered)
For components that have an existing border around the component when not in focus, a background fill color is added in addition to the focus rings. This ensures there’s a strong enough visual difference between the non-focus and focus state. These patterns are maintained across all components for consistency.
page 2
Pagination default
page 2
Pagination focus
#### Floating[](#floating)
Components without an existing fill or border will only display the double rings on focus. Since the inner ring matches the background color in most cases, this will visually appear like a single ring around the perimeter of the component.
[Home](#)
Navigation default
[Home](#)
Navigation focus
List Insert Document Code Link
Editor icon default
List Insert Document Code Link
Editor icon focus
#### Exceptions[](#exceptions)
The exceptions to this pattern are the `Clear` button variations. All buttons display a background fill layer when in focus. `Clear`, `Outline` and `Filled` styles will all look the same when in focus. The fill color was chosen to match the existing `Filled` style.
Button
Clear default
Button
Clear focus
Button
Tonal default
Button
Tonal default focus
### Browser default[](#browser-default)
Some focusable elements and Stacks components currently do not include custom focus styling. These elements will instead render the browser-default focus indicators.
## Viewport size[](#viewport-size)
All Stack Overflow products must conform to the [WCAG 2.2 SC 1.4.10: Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html). This requires that our product UIs support viewports as small as **320px x 256px** without requiring the user scrolling in multiple dimensions (unless an element requires it for usage or meaning). Very few users will ever use a viewport this small, but it’s important to support it so users can zoom in up to 400% and still have a usable experience. At 400% zoom, a 320x256 viewport translates to 1280x1024, which is a common resolution for many users. Supporting this small viewport size ensures that users with low vision can still use our products effectively.
### Exceptions[](#exceptions-1)
There are some exceptions to this rule. Some elements such as tables and videos may require horizontal scrolling on small viewports. In these cases, it’s acceptable to require scrolling in two dimensions. See the [WCAG 2.2 documentation on Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html#content-exceptions-for-reflow) for detailed guidance.
## Landmarks[](#landmarks)
[ARIA landmarks](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) should be used across Stack Overflow product pages to provide clear navigation structures for users relying on assistive technologies. Landmarks are inserted into the page explicitly using the `role` attribute on an element (e.g. `role="search"`, etc…) or by leveraging semantic HTML (e.g. an `header` element is given automatically the `banner` landmark).
Using semantic HTML elements should be preferred over using the `role` attribute whenever possible.
For a comprehensive guide on using ARIA landmark roles refer to:
* [WCAG ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
* [Using HTML landmark roles to improve accessibility](https://developer.mozilla.org/en-US/blog/aria-accessibility-html-landmark-roles)
* [Landmarks Browser Extension](https://matatk.agrip.org.uk/landmarks)
---
## Collection: base
### Page: Backgrounds
URL: https://stackoverflow.design/system/base/backgrounds/
Date: 2026-08-13T14:42:32.969Z
description: Atomic classes for controlling the background properties of an element.
Content:
## Background size[](#background-size)
Class
Output
`.bg-auto`
background-size: auto;
`.bg-cover`
background-size: cover;
`.bg-contain`
background-size: contain;
## Background repeat[](#background-repeat)
Class
Output
`.bg-repeat`
background-repeat: repeat;
`.bg-no-repeat`
background-repeat: no-repeat;
`.bg-repeat-x`
background-repeat: repeat-x;
`.bg-repeat-y`
background-repeat: repeat-y;
## Background position[](#background-position)
Class
Output
`.bg-bottom`
background-position: bottom;
`.bg-center`
background-position: center;
`.bg-left`
background-position: left;
`.bg-left-bottom`
background-position: left bottom;
`.bg-left-top`
background-position: left top;
`.bg-right`
background-position: right;
`.bg-right-bottom`
background-position: right bottom;
`.bg-right-top`
background-position: right top;
`.bg-top`
background-position: top;
### Background position examples[](#background-position-examples)
```html
flexbox and grid layouts.
Content:
## Gap classes[](#gap-classes)
Class
Output
Definition
Responsive?
`.g0`
gap: 0 0
Add no space between items
Yes
`.g1`
gap: 1px 1px
Space out items by 1px
Yes
`.g2`
gap: 2px 2px
Space out items by 2px
Yes
`.g4`
gap: 4px 4px
Space out items by 4px
Yes
`.g6`
gap: 6px 6px
Space out items by 6px
Yes
`.g8`
gap: 8px 8px
Space out items by 8px
Yes
`.g12`
gap: 12px 12px
Space out items by 12px
Yes
`.g16`
gap: 16px 16px
Space out items by 16px
Yes
`.g24`
gap: 24px 24px
Space out items by 24px
Yes
`.g32`
gap: 32px 32px
Space out items by 32px
Yes
`.g48`
gap: 48px 48px
Space out items by 48px
Yes
`.g64`
gap: 64px 64px
Space out items by 64px
Yes
### Examples[](#examples)
```html
img or video relative to its container.
Content:
## Classes[](#classes)
Class
Output
Definition
`.of-contain`
object-fit: contain
Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box.
`.of-cover`
object-fit: cover
Cover the entire content box with the content while preserving its aspect ratio. This may crop the content.
`.of-fill`
object-fit: fill
Stretch and scale the content's dimensions to match its content box. This is the default browser value.
`.of-none`
object-fit: none
Prevent the content from being resized.
`.of-scale-down`
object-fit: scale-down
When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content's original dimensions.
`.op-center`
object-position: center
Center the content within its content box.
## Examples[](#examples)
```html
…
…
…
…
…
…
``` Regardless of length, this text will be truncated horizontally. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will be truncated to 1 line, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will be truncated to 2 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will be truncated to 3 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will be truncated to 4 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will be truncated to 5 lines, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ### Fade[](#fade) Alternatively, you can use a vertical fade that will set `max-height` and sets a vertical `mask-image`: ```html…
…
…
``` Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Regardless of length, this text will fade out, vertically. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. --- ### Page: Vertical alignment URL: https://stackoverflow.design/system/base/vertical-alignment Date: 2026-08-13T14:42:33.467Z description: Atomic vertical alignment classes allow you to change an element's vertical alignment quickly. Content: ## Classes[](#classes) Class Output `.va-baseline` vertical-align: baseline; `.va-bottom` vertical-align: bottom; `.va-middle` vertical-align: middle; `.va-sub` vertical-align: sub; `.va-super` vertical-align: super; `.va-text-bottom` vertical-align: text-bottom; `.va-text-top` vertical-align: text-top; `.va-top` vertical-align: top; `.va-unset` vertical-align: unset; ## Examples[](#examples) ```html
…
```
```html
```
### JavaScript[](#javascript)
```html
…
```
```javascript
import React, { Component } from "react";
import { IP } from "../constants/IP";
import { withAuth0 } from "@auth0/auth0-react";
class AddATournament extends Component {
componentDidMount() {
this.myNewListOfAllTournamentsWithAuth();
}
}
export default withAuth0(AddATournament);
```
### CSS[](#css)
```html
…
```
```css
.s-input,
.s-textarea {
-webkit-appearance: none;
width: 100%;
margin: 0;
padding: 0.6em 0.7em;
border: 1px solid var(--bc-darker);
border-radius: 3px;
background-color: var(--white);
color: var(--fc-dark);
font-size: 13px;
font-family: inherit;
line-height: 1.15384615;
scrollbar-color: var(--scrollbar) transparent;
}
@supports (-webkit-overflow-scrolling: touch) {
.s-input,
.s-textarea {
font-size: 16px;
padding: 0.36em 0.55em;
}
.s-input::-webkit-input-placeholder,
.s-textarea::-webkit-input-placeholder {
line-height: normal !important;
}
}
```
### Java[](#java)
```html
…
```
```java
package l2f.gameserver.model;
public abstract strictfp class L2Char extends L2Object {
public static final Short ERROR = 0x0001;
public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // what?
return;
}
}
}
```
### Ruby[](#ruby)
```html
…
```
```ruby
# The Greeter class
class Greeter
def initialize(name)
@name = name.capitalize
end
def salute
puts "Hello #{@name}!"
end
end
g = Greeter.new("world")
g.salute
```
### Python[](#python)
```html
…
```
```python
def all_indices(value, qlist):
indices = []
idx = -1
while True:
try:
idx = qlist.index(value, idx+1)
indices.append(idx)
except ValueError:
break
return indices
all_indices("foo", ["foo","bar","baz","foo"])
```
### Objective-C[](#objective-c)
```html
…
```
```objectivec
#import
…
```
```swift
import Foundation
@objc class Person: Entity {
var name: String!
var age: Int!
init(name: String, age: Int) {
/* /* ... */ */
}
// Return a descriptive string for this person
func description(offset: Int = 0) -> String {
return "\(name) is \(age + offset) years old"
}
}
```
### Less[](#less)
```html
…
```
```less
@import "fruits";
@rhythm: 1.5em;
@media screen and (min-resolution: 2dppx) {
body {
font-size: 125%;
}
}
section > .foo + #bar:hover [href*="less"] {
margin: @rhythm 0 0 @rhythm;
padding: calc(5% + 20px);
background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat;
background-image: linear-gradient(-135deg, wheat, fuchsia) !important ;
background-blend-mode: multiply;
}
@font-face {
font-family: /* ? */ "Omega";
src: url("../fonts/omega-webfont.woff?v=2.0.2");
}
.icon-baz::before {
display: inline-block;
font-family: "Omega", Alpha, sans-serif;
content: "\f085";
color: rgba(98, 76 /* or 54 */, 231, 0.75);
}
```
### JSON[](#json)
```html
…
```
```json
[
{
"title": "apples",
"count": [12000, 20000],
"description": { "text": "...", "sensitive": false }
},
{
"title": "oranges",
"count": [17500, null],
"description": { "text": "...", "sensitive": false }
}
]
```
### C#[](#c)
```html
…
```
```csharp
using System.IO.Compression;
#pragma warning disable 414, 3021
namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List
…
```
```sql
CREATE TABLE "topic" (
"id" serial NOT NULL PRIMARY KEY,
"forum_id" integer NOT NULL,
"subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");
-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');
```
### Diff[](#diff)
```html
…
```
```diff
Index: languages/ini.js
===================================================================
--- languages/ini.js (revision 199)
+++ languages/ini.js (revision 200)
@@ -1,8 +1,7 @@
hljs.LANGUAGES.ini =
{
case_insensitive: true,
- defaultMode:
- {
+ defaultMode: {
contains: ['comment', 'title', 'setting'],
illegal: '[^\\s]'
},
*** /path/to/original timestamp
--- /path/to/new timestamp
***************
*** 1,3 ****
--- 1,9 ----
+ This is an important
+ notice! It should
+ therefore be located at
+ the beginning of this
+ document!
! compress the size of the
! changes.
It is important to spell
```
## Line numbers[](#line-numbers)
Add `.linenums` to include line numbers on a code block.
### Default[](#default)
```html
…
```
```html
123456
```
### Offset[](#offset)
Append a number preceeded by `:` to `.linenums` to offset the start of the line numbers.
```html
…
```
```json
232425262728293031323334[ { "title": "apples", "count": [12000, 20000], "description": {"text": "...", "sensitive": false} }, { "title": "oranges", "count": [17500, null], "description": {"text": "...", "sensitive": false} }]
```
---
### Page: Editor
URL: https://stackoverflow.design/system/components/editor/
Date: 2026-08-13T14:42:33.934Z
description: The Stacks editor adds "what you see is what you get" and Markdown capabilities to textareas. It is available as a separate Editor repository, but requires Stacks' CSS for styling.
Content:
Because of its size, the Stacks editor is bundled independently of Stacks. You can install it a few ways:
## Installation[](#installation)
### NPM[](#npm)
The Stacks Editor is available as an NPM package. To make it available in your node modules, `npm install @stackoverflow/stacks-editor`
### Import via Modules or CommonJS[](#import-via-modules-or-commonjs)
```javascript
import { StacksEditor } from "@stackoverflow/stacks-editor";
// Don't forget to include the styles as well
import "@stackoverflow/stacks-editor/styles.css";
new StacksEditor(
document.querySelector("#editor-container"),
"*Hello* World!",
{}
);
```
### Import via script tag[](#import-via-script-tag)
```html
```
## Configuration[](#configuration)
There are several options you can pass to the Stacks Editor.
## Examples[](#examples)
### Empty[](#empty)
```html
```
### Textarea content with tables enabled[](#textarea-content-with-tables-enabled)
```html
```
---
### Page: Empty states
URL: https://stackoverflow.design/system/components/empty-states
Date: 2026-08-13T14:42:33.937Z
description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user's last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.
Content:
## Classes[](#classes)
Class
Description
Modifies
`.s-empty-state`
Base empty state style.
N/A
## No data or results[](#no-data-or-results)
Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.
### Actionable[](#actionable)
If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.
```html
Try refining your search term or trying something more general.
Please check back in a few days.
There's no data associated with this account.
a element by default. In addition, we provide .s-link and its variations. In rare situations, .s-link can be applied to a button while maintaining the look of an anchor.
Content:
## Links[](#links)
### Link classes[](#link-classes)
Class
Description
Modifies
`.s-link`
Base link style that is used almost universally.
N/A
`.s-link__grayscale`
A link style modification with our default text color.
`.s-link`
`.s-link__muted`
Applies a visually muted style to the base style.
`.s-link`
`.s-link__danger`
Applies an important, destructive red to the base style.
`.s-link`
`.s-link__inherit`
Applies the parent element's text color.
`.s-link`
`.s-link__underlined`
Adds an underline to the link's text.
`.s-link`
`.s-link__dropdown`
Applies a caret for dropdowns and additional interactivity.
`.s-link`
### Single link examples[](#single-link-examples)
```html
Default
Grayscale
Muted
Danger
Inherit
Underlined
Links
```
[Default](#) [Grayscale](#) [Muted](#) [Danger](#) [Inherit](#) [Underlined](#) Button Link [Links](#)
### Accessibility[](#accessibility)
Any link with adjacent static text cannot use color alone to differentiate it as a link. If a link is next to static text and the only visual indication that it’s a link is the color of the text, it will require an underline in addition to the color. Reference [WCAG SC 1.4.1](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73) for more details.
## Anchors[](#anchors)
### Anchor classes[](#anchor-classes)
Class
Description
Modifies
`.s-anchors`
A consistent link style is applied to all descendent anchors.
N/A
`.s-anchors__default`
All descendent links receive s-link's default styling.
`.s-anchors`
`.s-anchors__grayscale`
Applies gray styling to all descendent links.
`.s-anchors`
`.s-anchors__muted`
Applies a visually muted style to all descendent links.
`.s-anchors`
`.s-anchors__danger`
Applies an important, destructive red to all descendent links.
`.s-anchors`
`.s-anchors__underlined`
Applies an underline to all descendent links.
`.s-anchors`
`.s-anchors__inherit`
Applies the parent element's text color to all descendent links.
`.s-anchors`
### Anchor examples[](#anchor-examples)
Sometimes you need to give all `` elements inside a container or component the same color, even when it’s impractical or even impossible to give each anchor element an `s-link` class (e.g. because the markup is generated from Markdown).
In this case, you can add the `s-anchors` class together with one of the modifiers `s-anchors__default`, `s-anchors__grayscale`, `s-anchors__muted`, `s-anchors__danger`, or `s-anchors__inherit` to the container.
```html
…
…
……
……
…For years parents have espoused the health benefits of eating garlic bread…
For years parents have espoused the health benefits of eating garlic bread…
| … | … |
| … | … | … | … | … |
| … | … | … | … | … | … |
| … | … | … |
| … | … | … |
| … | … | … |
| … | … | … |
| … |
|---|
| ` elements that control sorting. 4. Add the three icons for showing _ascending sort_, _descending sort_, and _unsorted_ to each of these header cells, hiding the first two with a `d-none` class. Add the `js-sorting-indicator` class to each of the icons, and add `js-sorting-indicator-asc`, `js-sorting-indicator-desc`, and `js-sorting-indicator-none` to the appropriate icon. **Note:** Using `js-…` classes is not really the optimal way of doing this, and will probably be replaced with something better eventually. When that happens, the `js-…` mechanism will be deprecated but continue to be supported for a while, so you have ample time to update things. By default, the data is sorted by the content of the cell. If you need to use a different value, for example because your cell contains a human-readable date, add a `data-s-table-sort-val` attribute to the cell. If a column contains any data that is not an integer, the data will be sorted lexicographically. Otherwise it will be sorted numerically, with empty cells being considered the lowest number. If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add `data-s-table-sort-to="top"` or `data-s-table-sort-to="bottom"` to the ` | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| … | ||
|---|---|---|
| Winter | December | 2 |
| Spring | March | 13 |
| Summer | June | 25 |
| Fall | September | 13 |
| Average temperature | 13 | |
|
|
… |
|---|---|
|
|
… |
| … | … | Add |
This will be shown only to employers and other Team members.
Required fields*
select tag within the .s-select class.
Content:
## Classes[](#classes)
Class
Description
Parent
Modifies
`.s-select`
Base select style.
N/A
N/A
`.s-select__sm`
Apply a small size.
N/A
`.s-select`
`.s-select__lg`
Apply a large size.
N/A
`.s-select`
`.has-error`
Apply an error state.
N/A
`.s-select`
`.has-success`
Apply a success state.
N/A
`.s-select`
`.has-warning`
Apply a warning state.
N/A
`.s-select`
## Base style[](#base-style)
```html
…
…
…
…
…
…
…
…
…
…
… … ``` **Font Weight:** Normal **Font Weight:** Bold **Font Style:** Normal **Font Style:** Italic **Font Style:** Unset **Text Transform:** Capitalize **Text Transform:** Lowercase **Text Transform:** Uppercase **Text Transform:** None **Text Transform:** Unset **Text Decoration:** Underline **Text Decoration:** None ## Layout[](#layout) ### Layout classes[](#layout-classes) Class Output Definition Responsive? `.ta-left` text-align: left; Inline contents are aligned to the left edge. Yes `.ta-center` text-align: center; Inline contents are aligned to the center. Yes `.ta-right` text-align: right; Inline contents are aligned to the right edge. Yes `.ta-justify` text-align: justify; Inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges, except for the last line. `.ws-normal` white-space: normal; Lines are broken as necessary to fill the parent. `.ws-nowrap` white-space: nowrap; Text wrapping is disabled. `.ws-pre` white-space: pre; Whitespace is preserved but text won't wrap. `.ws-pre-wrap` white-space: pre-wrap; Whitespace is preserved but text will wrap. New lines are preserved. `.ws-pre-line` white-space: pre-line; Whitespace is preserved but text will wrap. New lines are collapsed. `.ow-normal` word-break: normal; Restores overflow wrapping behavior. `.ow-anywhere` overflow-wrap: anywhere; Breaks a string of characters at any point when no other acceptable break points are available and does not hyphenate the break. `.ow-break-word` overflow-wrap: break-word; Breaks a word to a new line only if the entire word cannot be placed on its own line without overflowing. `.ow-inherit` overflow-wrap: inherit; Inherits the parent value. `.ow-intial` overflow-wrap: intial; Restores the value to the initial value set on the body. `.ow-unset` overflow-wrap: unset; Unsets any inherited behavior. Does not work in IE. `.break-word` word-break: break-word; overflow-wrap: break-word; hyphens: auto; A utility class combining all word-break strategies when you absolutely must break a word. `.wb-normal` word-break: normal; Restores word break behavior. `.wb-break-all` word-break: break-all; To prevent copy from overflowing its box, breaks should occur between any two characters (excluding Chinese, Japanese, and Korean text) `.wb-keep-all` word-break: keep-all; Removes word breaks for Chinese, Japanese, and Korean text. All other text behavior is the same as normal. `.wb-inherit` word-break: inherit; Inherits the parent value. `.wb-intial` word-break: intial; Restores the value to the initial value set on the body. `.wb-unset` word-break: unset; Unsets any inherited behavior. Show All Classes ### Layout examples[](#layout-examples) ```htmlText align: Left
Text align: Center
Text align: Right
Justify: …
Text align: Unset
White-space: Normal
White-space: Nowrap
White-space: Pre
White-space: Pre-wrap
White-space: Pre-line
White-space: Unset
Break word
Truncate: …
``` **Text Align:** Left **Text Align:** Center **Text Align:** Right **Text Align:** Justify — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. **Text Align:** Unset **White-space:** Normal **White-space:** Nowrap **White-space:** Pre **White-space:** Pre-wrap **White-space:** Pre-line **White-space:** Unset **Break word:** MethionylglutaminylarginylhionylglutaminylargintyrosylglutamylmethionylglutaminylarginyltyrlarginyltyrosylglutamylMethionylglutaminylarginyltyrosylglutamylnyltyrosylserinemethionylglutaminylargiglutamylmethionyosylglutamylmethionylglutaminylglutaminylarginyltyrosylglutamylmethionylglutaminylarginyltyrosylglutamylmetyltyrosylglutamylserine ## Fonts[](#fonts) ```html…
…
…
…
``` Sans Serif \-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" Serif Georgia, Cambria, "Times New Roman", Times, serif Monospace "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ## Sizes[](#sizes) Fonts larger than `.fs-body1` are reduced in size at the smallest responsive breakpoint. `.fs-body1` or smaller remain fixed at their initial pixel values. ### Size classes[](#size-classes) Class Size Line Height Responsive Size `.fs-fine` `12px` `1.36` `12px` `.fs-caption` `13px` `1.40` `13px` `.fs-body1` `14px` `1.40` `14px` `.fs-body2` `16px` `1.40` `15px` `.fs-body3` `18px` `1.40` `16px` `.fs-subheading` `20px` `1.40` `18px` `.fs-title` `22px` `1.40` `20px` `.fs-headline1` `28px` `1.40` `23px` `.fs-headline2` `36px` `1.40` `26px` `.fs-display1` `46px` `1.34` `29px` `.fs-display2` `58px` `1.28` `34px` `.fs-display3` `72px` `1.20` `37px` `.fs-display4` `100px` `1.18` `43px` ### Size examples[](#size-examples) ```html…
…
…
…
…
…
…
…
…
…
…
…
…
``` Fine Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Caption Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Body 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Body 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Body 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Subheading Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Headline 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Headline 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Display 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Display 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Display 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Display 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ## Line height[](#line-height) ```html…
…
…
…
…
…
…
``` **Line Height XS:** This sets the `line-height` value to `1`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height SM:** This sets the `line-height` value to `1.15`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height MD:** This sets the `line-height` value to `1.3`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height LG:** This sets the `line-height` value to `1.6`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height XL:** This sets the `line-height` value to `1.92`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height XXL:** This sets the `line-height` value to `2`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. **Line Height Unset:** This sets the `line-height` value to `initial`. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ## Hyphenation[](#hyphenation) Our hyphenation classes determine when text that wraps across multiple lines is hyphenated. You can prevent hyphenation entirely, or allow the browser to automatically hypenate. ```html…
…
``` This text will not be hyphenated when large words break—longer words are broken by `.ow-break-word`. This text will be hyphenated when large words break. `.ow-break-word` shouldn't be necessary since breaks are implied by hyphenation rules. ---