Layout
Screen size
Design for small screens first, starting with a single-column layout.
For most types of page, we recommend using either a 'two-thirds' or a 'two-thirds and one-third' layout. That stops lines of text getting so long that the page becomes difficult to read on desktop devices. This would usually mean no more than 75 characters per line.
Never make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.
The default maximum page width is 1020px, but you can make it wider if your content requires it.
Building your own layout
If you want to build your layout from scratch, or understand what each of the parts are responsible for, here's an explanation of how the page wrappers and grid system works.
Page wrappers
Limiting width of content
To set up your layout you will need to create 2 wrappers. The first should have the class govie-width-container, which sets the maximum width of the content but does not add any vertical margin or padding.
If your design requires them, you should place components such as breadcrumbs, back link and phase banner inside this wrapper so that they sit directly underneath the header.
Add vertical space
Within govie-width-container you should add the govie-main-wrapper class to your <main> element. This adds responsive padding to the top and bottom of the page and will be the container for your main content.
If you're not using the breadcrumbs, back link or phase banner components in your design, add the correct amount of vertical padding above the content by adding one of the following to your <main> element:
- the
govie-main-wrapper--auto-spacingclass - the
govie-main-wrapper--lclass - ifgovie-main-wrapper--auto-spacingdoes not work for your service
Grid system
Use the grid system to lay out the content on your service's pages.
Most gov.ie pages follow a 'two-thirds and one-third' layout, but the grid system allows for a number of additional combinations when necessary.
Your main content should always be in a two-thirds column even if you're not using a corresponding one-third column for secondary content.
Understanding the grid system
The grid is structured with a govie-grid-row wrapper which acts as a row to contain your grid columns.
You can add columns inside this wrapper to create your layout. To define your columns add the class beginning with govie-grid-column- to a new container followed by the width, for example govie-grid-column-one-third to apply your desired width.
Desktop specific grid classes
To specify a width at the desktop breakpoint you can use the desktop specific grid classes. For example govie-grid-column-two-thirds-from-desktop will set your column width to be two-thirds width at the desktop breakpoint only.
Width override classes
If you need to constrain the width of an element independently of the grid system, you can use width override classes.
The width override classes start with govie-!-width-, followed by the width on larger screen sizes. For example, govie-!-width-one-half will apply a width of 50% and govie-!-width-two-thirds will apply a width of 66.66%.
Override how elements display
You can use display override classes if you need to override how elements display on the page.
Use:
govie-!-display-blockto display as a blockgovie-!-display-inlineto display inlinegovie-!-display-inline-blockto display as an inline blockgovie-!-display-noneto remove the element from the page- You can also remove elements from the printed version of the page using
govie-!-display-none-print.