Buttons
Last updated: 21/11/2022
Note: The implementation instructions outlined below currently only work for sites hosted on the Publications Office portal. This service will soon be available to sites hosted on other platforms.
Page content
Useful links
Standard buttons
Main
How to implement Main
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-main sm">gs-btn-main sm</a>
<a href="#" class="gs-btn gs-btn-main">gs-btn-main</a>
<a href="#" class="gs-btn gs-btn-main lg">gs-btn-main lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-main sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-main sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-main"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-main gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-main lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-main lg gs-icon-l</a>
Secondary
How to implement Outline blue
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-sec sm">gs-btn-sec sm</a>
<a href="#" class="gs-btn gs-btn-sec">gs-btn-sec</a>
<a href="#" class="gs-btn gs-btn-sec lg">gs-btn-sec lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-sec sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-sec"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-sec lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec lg gs-icon-l</a>
Secondary fill
Use to denote a non-selected state in a group of buttons or as a less prominent choice. In both cases, secondary fill buttons must be immediately next to or in a group with visually accessible buttons main or secondary.
Example of a non-sected state in a tab group:
Example of a less prominent option:
Secondary fill is also used for accordion components with an arrow icon to convey the element is clickable.
Sizes and icons
How to implement Outline blue
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-sec-f sm">gs-btn-sec-f sm</a>
<a href="#" class="gs-btn gs-btn-sec-f">gs-btn-sec-f</a>
<a href="#" class="gs-btn gs-btn-sec-f lg">gs-btn-sec-f lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-sec-f sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec-f sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-sec-f"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec-f gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-sec-f lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-sec-f lg gs-icon-l</a>
Tertiary
How to implement Outline grey
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-ter sm">gs-btn-ter sm</a>
<a href="#" class="gs-btn gs-btn-ter">gs-btn-ter</a>
<a href="#" class="gs-btn gs-btn-ter lg">gs-btn-ter lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-ter sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ter sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ter"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ter gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ter lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ter lg gs-icon-l</a>
Ghost
How to implement Ghost
Your buttons must be inside a <div class="gcss-op"> tag.
You place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-ghost sm">gs-btn-ghost sm</a>
<a href="#" class="gs-btn gs-btn-ghost">gs-btn-ghost</a>
<a href="#" class="gs-btn gs-btn-ghost lg">gs-btn-ghost lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-ghost sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ghost sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ghost"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ghost gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ghost lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ghost lg gs-icon-l</a>
Publications Office services buttons
Ted
How to implement Ted
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-ted sm">gs-btn-ted sm</a>
<a href="#" class="gs-btn gs-btn-ted">gs-btn-ted</a>
<a href="#" class="gs-btn gs-btn-ted lg">gs-btn-ted lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-ted sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ted sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ted"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ted gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-ted lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-ted lg gs-icon-l</a>
Law
How to implement Law
Your buttons must be inside a <div class="gcss-op"> tag.
Tu place an icon to the right, simply put the <i> tag to the right of the button text and change gs-icon-l to gs-icon-r.
See complete list of icons
<a href="#" class="gs-btn gs-btn-law sm">gs-btn-law sm</a>
<a href="#" class="gs-btn gs-btn-law">gs-btn-law</a>
<a href="#" class="gs-btn gs-btn-law lg">gs-btn-law lg</a>
<!-- icons -->
<a href="#" class="gs-btn gs-btn-law sm"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-law sm gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-law"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-law gs-icon-l</a>
<a href="#" class="gs-btn gs-btn-law lg"><i class="gs-icon-download gs-icon-l" aria-hidden="true"></i>gs-btn-law lg gs-icon-l</a>
Accessibility aspects
These buttons should be given a role="button" if they are used to trigger in-page functionality (like collapsing content, other scripts or submitting a form) to properly convey their purpose to assistive technologies such as screen readers.
<a href="#" class="gs-btn gs-btn-main" role="button">gs-btn-main</a>