The Australian Government coat of Arms

Communities of practice

Communities of practice

Header


#1

Please provide any feedback for the Header component.

You can also view the component page on our documentation site for the Header component.


#2

Hi!

We just published a new major version of the header component — v4.0.2.

The new header includes a placeholder for the Australian Government logo (or an agency logo of your choice) and an optional grid layout.

If you want to check out the latest version, head over to the component page on the design system documentation site.


#3

Just some questions/comments regarding the header component:

  • Do you propose any standards with respect to crest size across breakpoints (we see lots of variants across government). I’m thinking the Design System equivalent to https://www.dta.gov.au/standard/design-guides/branding/?

  • How do we handle multi-line site titles (i.e. baseline and wrapping)?

  • Presumably if relevant (e.g. co-branding) we should replace the site title with a site logo?

  • The site title shouldn’t be a h1. This should be reserved for the page title. Otherwise, it will be the same across the site. I propose a better approach is to the suitable style to a p tag or equivalent.

It would be great if this could be combined in a pattern with a global all-of-govt header as discussed in Component: Universal Federal Government Header.


#4

There were some great concepts shown last year for the header across breakpoints, they have a very cool solution in mind, last I heard it was going through approvals. Any update would be great.


#5

Hi @downeymilo, thanks for the great questions!

1 - We’re not proposing any standard sizing for the government logo at this stage. The header component is built to be flexible to accommodate any size logo. PM&C maintain the current guidelines on the use of the government logo.

That said, there are CSS variables you can tweak to change the size of the desktop and mobile logos:

$AU-logo-width: 12unit !default;
$AU-logo-width-sm: 16unit !default;

2 - There are multiple examples here of header implementations for headers with and without logos on the UI-Kit test site. If you want certain alignment for a site title that spans over multiple lines, the component is flexible and customisable so you can tweak it to suit your needs.

3 - Not necessarily. We intended for all logos to go in the au-header__brand-image as a single image. So if you need to co-brand a site, we’d recommend creating a single image with any relevant logos.

4 - Again, not necessarily. This one is a bit hard as there are examples where the site title might be the title of the page. But like everything else, it’s designed to be flexible so if you’d like to change it to be a <p>, you can do that and add the au-header__heading class to style it appropriately.

If you think any of the examples on the site should be updated please let us know. I’ve added documentation about how to change the logo sizes using SASS variables. You can keep tabs on the progress in issue #147.


#6

Possible standardised approaches:

  • Accessible text equivalents (example markup)
  • CSS-enforced isolation zones
  • Print-friendly variants (assuming black on white)
  • Responsive variations of PNG version of Coat of Arms
    • Stacked / Inline
    • SVG (may not have any benefits re:download size) variants inheriting theme palette for accessible contrast (possibly with an option to generate SVG from department or agency name variables)

Refer:
http://webarchive.nla.gov.au/gov/20160228200945/http://webguide.gov.au/initial-requirements/branding/implementation/