> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/code-knack-print-page/print-header-with-page-break-number.md).

# Print Header with Page Break/Number

You can create a printer header with page breaks and page numbers using some CSS and HTML. 

<figure><img src="/files/5ewAd7cTxtGfj11uxhUF" alt=""><figcaption><p>Header design example</p></figcaption></figure>

Keep in mind that currently, the ***page break*** only works in PC/laptop devices on all browsers, but does not work in iOS mobile devices. You can read more about [break-before](https://developer.mozilla.org/en-US/docs/Web/CSS/break-before) CSS in the MDN docs.

## The JS

None

## The HTML

Use Knack's Rich Text View to create the header. On the knack app itself you will have to add the headers based on how many pages.

### First Header

On line 1 you want to include the `style="break-before: avoid;"` to prevent adding a page break before the first page header.

{% code lineNumbers="true" fullWidth="true" %}

```html
<div class="image-header-container" style="break-before: avoid;">
	<span class="image-seal"></span>
	<span class="text-header">
	<span class="header-title">Transportation and Public Works Department</span>
	<br>Mobility Services
	<br>1501 Toomey Road
	<br>Austin, TX 78704
	<br>512-974-7857
	</span>
</div>
<div class="page-counter">
	Page <span class="page-number"></span>
</div>
```

{% endcode %}

### Rest of Headers

Same as code above without the `break-before:avoid` styling to force the page breaks.

{% code lineNumbers="true" fullWidth="true" %}

```html
<div class="image-header-container">
	<span class="image-seal"></span>
	<span class="text-header">
	<span class="header-title">Transportation and Public Works Department</span>
	<br>Mobility Services
	<br>1501 Toomey Road
	<br>Austin, TX 78704
	<br>512-974-7857
	</span>
</div>
<div class="page-counter">
	Page <span class="page-number"></span>
</div>
```

{% endcode %}

## The CSS

The image-header-container on line 17 has a `break-before:page` that inserts a page break before the header.&#x20;

{% code lineNumbers="true" fullWidth="true" %}

```css
/********************************************/
/****** Print Header ************************/
/********************************************/
#kn-scene_65, #kn-scene_83 {
  counter-reset: page;
}
#kn-scene_65 .view-group, #kn-scene_83 .view-group {
  display: block; /* avoids text overlapping */
}

.image-header-container {
  display: block;
  align-items: flex-start;
  flex-direction: row;
  justify-content: center;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  break-before:page;
}

.image-seal {
  content:url("https://www.austintexas.gov/sites/default/files/images/Transportation/Home_Page_Gallery/2023%20Austin%20Transportation%20Public%20Works%20Branding%20Guide%2004.28.23_Color%20stack.png");
  width: 152px; 
  height: 113.324px;
  display: inline-block; 
  vertical-align: top;
  border-right: 3px solid #2B5EA0;
}

.text-header {
  justify-content: center;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  display: inline-block; 
  vertical-align: top; 
  margin-left: 10px;
}

.header-title {
  color: #2B5EA0;
  font-weight:lighter;
  font-size:1.5em;
}

/* Page Number Counter setup */
.page-counter {
  display:block;
  text-align: right;
  margin-top: 10px;
}

.page-counter .page-number::before {
  counter-increment: page;
  content: counter(page);
}
```

{% endcode %}