A place for NSW Government digital creators to collaborate, share and learn.
Hi everyone,
We’ve been working on designs for labels (in the context categorising items) for example ‘Salesforce’ and ‘API’ in the lists below…
When we go to a card view, the red lines conflict with the red highlight of the card.
I have mocked up a few possible variations, could I get some feedback and possibly any other ideas?
Option 1
Option 2
Option 3
Option 4
Thanks in advance
Mike
I like option 3. Keeps the categories separated which makes it clear they are not just a piece of title or content.
Hi @mike.hall - First question is what do the labels do? Are they clickable or are they just displaying metadata to the user to help them understand the topic? If the function is mainly for driving filters, display related content or content governance and maintenance, do we need to display them on the card?
For the design, I find it a bit hard to judge when we see the components in isolation. When we are building pages that use a number of components together, there are lots of vertical lines of different weights so it can look a bit busy.
If I had to make a choice it would be presenting the tags without bolding, without the red pipe and possibly in the dark grey text as it’s tertiary information. I think we’d also need to test the design with 2 lines of tags to see what happens.
@mike.hall My preference is to avoid using the vertical line (pipe) device unless it serves a purpose. The device is used on a number of components and it can quickly become clutter on a page with multiple components.
Thanks @jennifer.weiley and @marial
Option 1, to keep content hierarchy consistent with ‘search list’ results.
Do you have a limit of character count of Labels and how many you allow . Assuming these designs work with single line allowed for Labels.
As always, thanks @Nesan. We don’t currently have a character count, but should definitely look at that, especially within the context of a card.
