Details pattern

I came across the details component used by @mike.hall and @mason.phan - have we considered creating this pattern?

It would be useful for providing our users with tips, definitions or other requirements for a small amount of text to add clarity required by only some users. In these instances, it would be preferable to a single accordion.


Thanks @jennifer.weiley - we actually had a session today with the product team to shortlist the next batch of patterns for build and will pass this onto @mike.hall to consider. I’ll post the shortlist soon for community feedback.

1 Like

Thanks @jennifer.weiley it’s not one that appeared in our audit. Have you used it in your products?

Hi @mike.hall - no, I haven’t used it but we’ve done workarounds like footnotes (yuk!) or single accordions or callout boxes or hover text. This would be a much neater solution than our clumsy workarounds that have probably been failing the accessibility test too.

This example comes from the beta website: Advertising campaigns up to $250,000

This comes from the Revenue website: Surcharge land tax and duty - discretionary trusts

I think an accessible tooltip or expanding panel is a good idea for the backlog.

We have tooltip already on the backlog, soI’ll make sure we look at these alternatives when we get to it…


1 Like

This ‘details’ pattern is currently used in a Life events prototype I’ve seen too:

So we may have some moment for a community contributed version that arrives, prior to the core Design System developing one. (Happy to setup a chat around this if it’s useful :slight_smile:)

Out of interest though, does the existing “When is a certificate not needed?” prompt satisfy the test of being information only needed by some users? Perhaps that content could come up out from the accordion?

Then the lower level “What is ‘routine advertising’?” might be a better use for a new details pattern layout as it’s providing a definition that some users may not need)?

I think @JamesFehon that the Advertising page could benefit from some more thinking about the content design. It’s a very dense page and there are two other similar pages for different $$ values. It might be more meaningful to structure the content in steps which would minimise the duplication across the three pages.

Hi @JamesFehon - I came across another example in this blog from nz govt. They have used a details pattern to hide/show the alt text / description for an image.

1 Like