Print Helper Classes

Print Widths

See general Size Helper Classes. Just add the prefix .print- to the helper classes.

Examples:

// sets the widths to 100% only for print
.print-h-width-100

// sets the widths to "auto" only for print
.print-h-width-auto

Print Margins / Paddings / Spacings

See general Spacing Documentation. Just add the prefix .print- to the helper classes.

Examples:

// resets all vertical margins _only_ for print
.print-m-y-reset

// xxl-padding on the right _only_ for print
.print-p-r-xxl

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="h-highlight-block -has-border print-p-reset print-m-r-xxl">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="h-highlight-block -has-border print-p-reset print-m-l-xxl">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

Print Display Helper Classes

Hide on Print

.print-hide or .hidden-print / .no-print (deprecated)

Hide me on print.

<div class="print-hide h-highlight-block">
  <p>Hide me on print.</p>
</div>

TIP

If the hidden element contains another class .-is-visible or .ha-show/.hp-show/.rb-show (deprecated) it will be visible in print, too.

Show on print.

<div class="print-hide -is-visible h-highlight-block">
  <p>Show on print.</p>
</div>

Display on Print

TIP

General helper classes are: .print-visible or .pdf-display (deprecated), which will display the element in the print view (display styles depending on element type),

It's preferred to use more specific classes like: .print-inline, .print-block or .print-inline-block or even .print-flex

Inline on print.

Inline on print.

<div class="print-inline-block">
  Inline on print.
</div>
<div class="print-inline">
  Inline on print.
</div>

Print Color Helper Classes

• .print-color-black to display the font in black.
• .print-no-bg to remove the background-color.

No background-color on print

<div class="h-bg-color-primary print-no-bg">
  <p class="h-color-white print-color-black">No background-color on print</p>
</div>

Print Border Helper Classes

.print-no-border to remove a border.

.print-border-top to add a gray border on the top.

.print-border-bottom to add a gray border on the bottom.

No surrounding red border on print, only bottom-border

<div class="h-border-primary-bold print-no-border print-border-bottom">
  <p class="h-color-white print-color-black">No surrounding red border on print, only bottom-border</p>
</div>

Avoid Print Page Break

Use .print-no-page-break to avoid a page-break within the element.

Print Table Helper Classes

Add a bottom-border to table rows (horizontal border): .print-row-border

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<table class="c-table print-row-border">
  <tr>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
  </tr>
    <tr>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
  </tr>
</table>

Add a bottom-right to table columns (vertical border): .print-col-border

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<table class="c-table print-col-border">
  <tr>
    <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </td>
  </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </td>
    </tr>
</table>