+
+
+ Accessibility First
++ Grade B compliance to Microsoft Accessibility Standards, which include WCAG 2.0 + standards. +
+
+
+ + Powering Microsoft Learn +
++ Atlas Design System +
++ Build accessible, high-quality, and consistent experiences at scale with a CSS-first + design system. +
+ +
+
+
+ 30+
+ Components
+
+
+ 3+
+ Themes
+
+
+ 5
+ Layouts
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Atlas Design
+
+
+
+
+
+
+
+
+
+
+ Why Atlas?
++ Built for web developers who care about quality and standards +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CSS-First
++ Zero-dependency approach. JavaScript only where required for accessibility and + behavior. +
+
+
+
+ RTL Support
++ Full right-to-left reading direction support via logical properties. +
+
+
+
+ Themeable
++ Light, Dark, and High Contrast themes included. Add unlimited custom themes. +
+
+
+
+ VS Code Extension
++ Atlas Design System Tools + provides IntelliSense and class completion for faster development in your IDE. +
+
+
+
+ NPM Published
++ Easy installation via npm. Available as @microsoft/atlas-css and + @microsoft/atlas-js. +
+
+
+
+ Site Layouts
++ Pre-built responsive layouts for common site structures like sidebars, headers, and + content areas. Just add classes to your HTML element to switch layouts. +
+
+
+
+ Tested with Playwright
++ Interactive components are tested in CI with Playwright to ensure quality. +
+
+
+
+
+
+
+
+ CSS first. Zero friction.
++ Just add classes to your HTML and ship. +
+-
+
- + ✓ + Large component library for styling + +
- + ✓ + Semantic HTML that works everywhere + +
- + ✓ + Utility classes for rapid prototyping and maximum flexibility + +
- + ✓ + Framework agnostic—works with any stack + +
- + ✓ + Accessible by default + +
+
+
+
+
+ Component Showcase
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <div class="field">
+ <label class="field-label" for="home-example-input">Text input</label>
+ <div class="field-body">
+ <input class="input" id="home-example-input" type="text" placeholder="Enter text..." />
+ </div>
+</div>
+<div class="field">
+ <label class="field-label" for="home-example-select">Select</label>
+ <div class="field-body">
+ <div class="select">
+ <select id="home-example-select">
+ <option value="">Choose an option</option>
+ <option value="option-1">Option 1</option>
+ <option value="option-2">Option 2</option>
+ </select>
+ </div>
+ </div>
+</div>
+<div class="field">
+ <label class="field-label" for="home-example-textarea">Textarea</label>
+ <div class="field-body">
+ <textarea class="textarea" id="home-example-textarea" rows="2" placeholder="Enter description..."></textarea>
+ </div>
+</div>
+<div class="field">
+ <div class="field-body">
+ <label class="checkbox">
+ <input type="checkbox" id="home-example-checkbox" checked />
+ <span class="checkbox-check" role="presentation" aria-hidden="true"></span>
+ <span class="checkbox-text">Checkbox option</span>
+ </label>
+ </div>
+</div>
+<div class="buttons margin-top-sm">
+ <button class="button button-primary" id="home-example-button-submit">Submit</button>
+ <button class="button button-clear" id="home-example-button-cancel">Cancel</button>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <div class="textarea-form">
+ <textarea
+ class="textarea"
+ rows="3"
+ placeholder="Ask a question or describe what you'd like to do"
+ ></textarea>
+ <div class="textarea-form-footer">
+ <div class="textarea-form-footer-left">
+ <span class="color-text-subtle">0 / 500</span>
+ </div>
+ <div class="textarea-form-footer-right">
+ <button class="button button-clear" aria-label="Attach (non functional)">
+ <span class="icon font-size-lg">
+ <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g>
+ <path class="fill-current-color" d="M4.82841 10.4848..." />
+ </g>
+ </svg>
+ </span>
+ </button>
+ <span class="textarea-form-footer-divider" aria-hidden="true"></span>
+ <button class="button button-clear" aria-label="Send">
+ <span class="icon font-size-lg">
+ <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+ <path class="fill-current-color" d="M4.12775 6.9639..." />
+ </svg>
+ </span>
+ </button>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <div class="display-grid gap-sm" style="grid-template-columns: repeat(2, 1fr);">
+ <article class="card">
+ <div class="card-content">
+ <p class="card-supertitle">Component</p>
+ <a href="#" class="card-title">Button</a>
+ <p class="card-content-description">Interactive elements for user actions</p>
+ </div>
+ </article>
+ <article class="card">
+ <div class="card-content">
+ <p class="card-supertitle">Component</p>
+ <a href="#" class="card-title">Card</a>
+ <p class="card-content-description">Container for related content</p>
+ </div>
+ </article>
+ <article class="card" style="grid-column: span 2">
+ <div class="card-template">
+ <p class="card-supertitle">Component</p>
+ <a href="#" class="card-title">Template card</a>
+ <img aria-hidden="true" class="card-template-icon" src="..." />
+ <div class="card-template-detail">
+ <p>Additional details or elements can be placed here.</p>
+ </div>
+ </div>
+ <div class="card-footer">
+ <div class="card-footer-item">
+ <progress class="progress-bar" style="width: 60px;" max="100" value="70"></progress>
+ </div>
+ <div class="card-footer-item">
+ <button class="button button-primary button-filled button-sm">Continue</button>
+ </div>
+ </div>
+ </article>
+</div>
+
+
+
+
+
+
+
+
+ + + Title +
++ A notification about something happening in the world + Link +
+
+
+
+
+ Success notification Link
+
+
+
+
+ Danger notification Link
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <div class="notification">
+ <div class="notification-content">
+ <p class="notification-title">
+ <span class="icon" aria-hidden="true">
+ <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="fill-current-color">
+ <path
+ d="M8 0C8.73438 0 9.44271 0.09375 10.125 0.28125C10.8073 0.46875 11.4427 0.739583 12.0312 1.09375C12.6198 1.44792 13.1589 1.86458 13.6484 2.34375C14.138 2.82292 14.5573 3.36198 14.9062 3.96094C15.2552 4.5599 15.5234 5.19792 15.7109 5.875C15.8984 6.55208 15.9948 7.26042 16 8C16 8.73438 15.9062 9.44271 15.7188 10.125C15.5312 10.8073 15.2604 11.4427 14.9062 12.0312C14.5521 12.6198 14.1354 13.1589 13.6562 13.6484C13.1771 14.138 12.638 14.5573 12.0391 14.9062C11.4401 15.2552 10.8021 15.5234 10.125 15.7109C9.44792 15.8984 8.73958 15.9948 8 16C7.26562 16 6.55729 15.9062 5.875 15.7188C5.19271 15.5312 4.55729 15.2604 3.96875 14.9062C3.38021 14.5521 2.84115 14.1354 2.35156 13.6562C1.86198 13.1771 1.44271 12.638 1.09375 12.0391C0.744792 11.4401 0.476562 10.8021 0.289062 10.125C0.101562 9.44792 0.00520833 8.73958 0 8C0 7.26562 0.09375 6.55729 0.28125 5.875C0.46875 5.19271 0.739583 4.55729 1.09375 3.96875C1.44792 3.38021 1.86458 2.84115 2.34375 2.35156C2.82292 1.86198 3.36198 1.44271 3.96094 1.09375C4.5599 0.744792 5.19792 0.476562 5.875 0.289062C6.55208 0.101562 7.26042 0.00520833 8 0ZM9 12V10H7V12H9ZM9 9V4H7V9H9Z"
+ />
+ </svg>
+ </span>
+ <span>Title</span>
+ </p>
+ <p>A notification about something happening in the world <a href="#">Link</a></p>
+ </div>
+</div>
+<div class="notification notification-success">
+ <div class="notification-content">
+ <p>Success notification <a href="#">Link</a></p>
+ </div>
+</div>
+<div class="notification notification-danger">
+ <div class="notification-content">
+ <p>Danger notification <a href="#">Link</a></p>
+ </div>
+</div>
+
+
+
+ Tag
+ Tag
+ Tag
+
+
+
+
+
+ Interactive tag
+
+
+ Content.
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <span class="tag">Tag</span>
+<span class="tag tag-filled">Tag</span>
+<span class="tag tag-primary">Tag</span>
+<span class="tag tag-interactive">
+ <details class="popover tag-popover">
+ <summary class="tag-summary">Interactive tag</summary>
+ <div class="popover-content">
+ <p>Content.</p>
+ </div>
+ </details>
+</span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <button class="button">Default</button>
+<button class="button button-primary">Primary</button>
+<button class="button button-primary button-filled">Filled</button>
+<button class="button button-clear">Clear</button>
+<button class="button button-danger">Danger</button>
+<button class="button button-sm">Small</button>
+
+ -
+
-
+ + + + ++++
Project deployed to production
+Feb 2, 2026, 11:30 AM
+
+ -
+ + + + ++++
Pull request merged
+Feb 2, 2026, 10:00 AM
+
+ -
+ + + + ++++
Pull request approved
+Feb 1, 2026, 4:30 PM
+
+ -
+ + + + ++++
Pull request opened
+Jan 30, 2026, 9:15 AM
+
+
+
+
+
+
+ View source code
+
+
+
+
+
+
+ HTML
+
+
+
+ <ol class="timeline">
+ <li class="timeline-item">
+ <div class="timeline-item-badge">
+ <span class="badge badge-success">
+ <span class="icon" aria-hidden="true">...</span>
+ </span>
+ </div>
+ <div class="timeline-item-template">
+ <p class="timeline-item-template-title">Project deployed to production</p>
+ <p class="timeline-item-template-time">Feb 2, 2026, 11:30 AM</p>
+ </div>
+ </li>
+ <li class="timeline-item">...</li>
+ <li class="timeline-item">...</li>
+</ol>
+
+ Ready to build?
+Get up and running in seconds
+
+
+
+ terminal
+
+
+
+ # Install with npm
+npm install @microsoft/atlas-css
+
+# Or use from CDN
+https://unpkg.com/@microsoft/atlas-css+ Then dive into our documentation or explore the source. +
+ +
```
@@ -64,7 +64,7 @@ If the source image has a different intrinsic aspect ratio than the atomic ratio
```
diff --git a/site/src/components/breadcrumbs.md b/site/src/components/breadcrumbs.md
index 5bad527c0..db8ee0526 100644
--- a/site/src/components/breadcrumbs.md
+++ b/site/src/components/breadcrumbs.md
@@ -80,7 +80,7 @@ Some situations may require the inclusion of a slash previous the first breadcru
## Size modification with Atomics
-By default `.breadcrumbs` are just slightly smaller than the document's font size. However, you may use [font size atomics](~/src/atomics/typography.md) to easily change the size of all the breadcrumbs. See example below, where `font-size-xl` is applied the the `.breadcrumbs` element.
+By default `.breadcrumbs` are just slightly smaller than the document's font size. However, you may use [font size atomics](/atomics/typography/) to easily change the size of all the breadcrumbs. See example below, where `font-size-xl` is applied the the `.breadcrumbs` element.
```html