Shared Layout

All of the default templates share a basic general layout, consisting of a navigation bar at the top of the page, a preamble, a main body, and a footer area. The styling of the main body is particular to each page.

The shared layout is comprised by the following sections:

Navigation Bar
Preamble
Footer

Certain style classes are used by all of the web pages rendered by sapi-nt. You can use them to apply consistent styling to the common structures and elements of the page.

Class	Usage
container	A generic container for a top-level component in the layout.
row	A container which represents a horizontal span within a container, and contains elements which are arranged into columns.
col	A container which represents a column within a row.
heading	Any heading element (eg. `h1`, `h2`).

The navigation bar is comprised by two main elements - the API logo and the related content links - arranged into two columns. Its main component is marked with the navbar class.

Logo

The logo is displayed on the left side of the navigation bar. By default it is the Epimorphics logo. You can set the logo by setting the content CSS property of the image element.

The logo area uses the following style classes:

Class	Usage
navbar-brand	The container for general API branding.
navbar-logo	The logo image.

Content Links

The links to related content are displayed on the right side of the navigation bar.

The links area uses the following style classes:

Class	Usage
navbar-content	The container for related content links.
api-title	The configured API title.
api-home-link	The link to the API “home”, or the context path of the application.
api-doc-link	The link to the API documentation page.
model-doc-link	The link to the data model documentation page.

If your application doesn’t use all of these sapi-nt features, you may want to hide some of the links by setting the display CSS property to none.

Preamble

The preamble is displayed below the navigation bar.

The preamble area uses the following style classes:

Class	Usage
preamble	The container for preamble content.
service-phase	The container for service phase information.
service-phase-badge	The service phase (eg. ALPHA, BETA).
feedback	Information about how to give feedback on the API.
contact-email	The `mailto` link for the configured API contact email.

The service phase badge is empty by default, but you can assign a value by using the content CSS property on the :after pseudo-element of the service-phase-badge element.

The footer is comprised by two main elements - support information and API information - arranged into two columns. Its main component isn’t marked with a CSS class but is identified as the footer element.

Support

The support information area is displayed on the left side of the footer. It contains contact information for the organisation that is responsible for maintaining the API.

The support information area uses the following style classes:

Class	Usage
support	The container for support information.
support-contact	Contact information.
contact-email	The `mailto` link for the configured API contact email.

By default, the contact information given is that of Epimorphics.

API Information

The API information area is displayed on the right side of the footer. It contains some additional information about the API itself.

The API information area uses the following style classes:

Class	Usage
about	The container for additional API information.
license	License information.
license-link	The link to the document which describes the license.
credits	Information crediting the authors of the API.

By default, the license displayed is the Open Government Licence v3.0, and the API is credited to Epimorphics.