` repeats at the top of every printed page.
+- A table row never splits across a page break.
+- A card never splits across a page break — it either fits fully on one page or starts on the next one.
+- Cards lose their border and shadow when printed, since these don't add anything on paper.
+
+## Print utilities
+
+Tabler generates `d-print-*` classes to show or hide any element only when the page is printed, the same way [display utilities](/ui/utilities) work on screen.
+
+Class|`display` value used on print
+-|-
+`d-print-none`|`none`
+`d-print-inline`|`inline`
+`d-print-inline-block`|`inline-block`
+`d-print-block`|`block`
+`d-print-grid`|`grid`
+`d-print-inline-grid`|`inline-grid`
+`d-print-table`|`table`
+`d-print-table-row`|`table-row`
+`d-print-table-cell`|`table-cell`
+`d-print-flex`|`flex`
+`d-print-inline-flex`|`inline-flex`
+
+`.d-print-none` is the one you'll use most — add it to anything that shouldn't appear on a printout, like a "Search" box or an "Edit" button:
+
+
+ Hidden on print
+
+
+The other `d-print-*` classes work the other way around: pair them with a screen-only display utility (such as `.d-none`) to show something only when the page is printed:
+
+```html
+This text only shows up when the page is printed.
+```
+
+## The media-print mixin
+
+When customizing Tabler's SCSS, use the `media-print` mixin instead of writing `@media print` by hand. It lives in `core/scss/mixins/_mixins.scss`:
+
+```scss
+@mixin media-print {
+ @media print {
+ @content;
+ }
+}
+```
+
+Use it inside a component or layout rule to add print-only styles next to the rest of the component's SCSS:
+
+```scss
+.my-widget {
+ border: var(--border-width) var(--border-style) var(--border-color);
+
+ @include media-print() {
+ border: none;
+ box-shadow: none;
+ }
+}
+```
+
+## Accessibility
+
+Hiding navigation and interactive controls on print doesn't affect screen readers or keyboard users — it only applies inside the `print` media type, so the page works exactly as before on screen. Keep enough contrast in any custom print styles you add: printed pages can't rely on color alone, since some printers output in black and white.
diff --git a/shared/data/docs.json b/shared/data/docs.json
index a0df243cd..0b33c9c6f 100644
--- a/shared/data/docs.json
+++ b/shared/data/docs.json
@@ -444,6 +444,10 @@
"title": "Margins",
"url": "/ui/utilities/margins"
},
+ {
+ "title": "Printing",
+ "url": "/ui/utilities/printing"
+ },
{
"title": "Vertical align",
"url": "/ui/utilities/vertical-align"