The Australian Government coat of Arms

Communities of practice

Communities of practice

Header

Please provide any feedback for the Header component.

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

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.

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.

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.

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.

2 Likes

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/

2 Likes

Hi all,

Had an opportunity to meet @sukhraj.ghuman and @gordon.grace at the DTA summit yesterday which was great. Further to a conversation with @gordon.grace, putting my 2c in here about some challenges that have come up for us regarding headers and branding. (This is probably a relevant post for the branding thread here as well: Migrating website branding guidelines for the "Australian Government Design" and "Agency Design" to designsystem.gov.au)

We have a current portal (myCASA, https://my.casa.gov.au) which uses the design system. We are looking at introducing a new govCMS / design system compatible template for our main website in the future as well,

This has opened up a questions for us regarding 1) the coat of arms and 2) site title and 3) description (there’s probably a 4th question about the mobile menu but I’ll post that separately!)

  1. coat of arms. Should this consistently be Australian Government or the agency COA? We have a long agency name, and the current Times font does not work well on mobile. The COA details really get lost on mobile as well and becomes a big blur of wattle :slight_smile: Also, for agency-specific COAs, the alignment is quite disjointed with a good 1/3rd extra space at the top to align all the elements which leads to the logo often floating weirdly in terms of alignment with everything else on the page.

  2. This obviously impacts the site title. If the COA is agency-specific, this arguably becomes redundant for a main website. If it’s generic Australia COA, then writing out “Civil Aviation Safety Authority” works but is quite long on mobile in this component. But in a portal context, the generic COA with ‘myCASA’ loses a lot of context.

  3. site description - this feels like it should be optional, but the site title doesn’t re-align if this is blank. Can this be added as a class-enabled feature? I see the designsystem.gov.au has dropped the site description and aligns to the logo quite nicely.

My feeling here is the branding/header component should be generic Australia COA with a smaller section for the agency name/brand - also similar to what GOV.UK have done?

2 Likes

I agree that we should have a consistent header component, similar to the GOV.UK Header.
But correct me if I’m wrong, wasn’t the common “gov.au” header more-or-less killed?
image

From memory, the first cut of the gov.au branding header was pulled directly from the US Design System banner component which includes some dropdown information we can probably get rid of completely.

There’s also that old bear of a responsive version of the CoA if want to go down the same route.
ezgif-1-cfba38e2f5a6

2 Likes

Where is that responsive CoA from? It’s great…

You can thank ex-DTAer Trevor Brennan (and co)


Could be wrong, but I believe approval of the SVG version of the CoA is with PM&C.

Back to the earlier point, my vote is for a generic gov.au CoA component. Call it a masthead like SG?
With the current header component converted be agency/brand specific.

1 Like

Hi,

Just wondering if I’m missing something in implementation but when we use the AU header component the react module renders a <div class="au_header"> but from the example in the doco we expect it would have rendered a <header class="au_header"> element?
One of our devs looked in
header component source code
and confirmed that AUheader renders a <div>

Hmm yes that does look like a bug to me

See diff:
https://auds.service.gov.au/packages/header/tests/react/
https://auds.service.gov.au/packages/header/tests/site/

Can you please file a bug report :blush:

Great, thanks for the verification. Bug report filed