[design system] something better for the blurb?

[stevieflow]

This block of text:

It seems important and useful, but is something I've completely missed , as it isn't visually prominent

Is some kind of "product description callout box" in the design system something that is in the plans / desirable?

@robredpath @codemacabre @chrisarridge @IsabelBirds

[stevieflow]

@codemacabre is there anything in the design system for this ?

We have a similar experience with the BDS page, in that the blurb just fades away imho

cc/ @emmajclegg

[codemacabre]

@stevieflow There isn't anything specifically designed for this; a callout might do the job, but something simple like adding an 'Overview' heading or something might be a good way to direct the user's eye to the text better.

Alternatively, we could investigate designing something else to accentuate the visual importance of the text, a bit like the card component.

[stevieflow]

Thanks for the quick response @codemacabre

Actually - and apologies for flipping around different sites - but d-portal has a background color (to my eye), that helps make some distinction:

Is that something that we need to apply across all sites, for consistency (or is this not in the design system?)?

Elsewhere (going for a full house!), we have some mechanisms for tables and headings in the dashboard that might have relevance, too

Apologies again for the run around - but I think we can make some changes to help such overview text more visible (with the design system being the answer)

Thanks

[codemacabre]

The body has its background-color set to light grey for all sites using the design system, but it's not being applied consistently. I can investigate that, but I think we'd still have the same issue as originally reported for the blurb. Here's the BDS with that background colour:

I think we'd still need to decide on an approach to make the blurb stand out and apply that consistently. I don't think the dportal style of splitting the main content so the grey is visible between sections is viable, as it'd involve some breaking structural and stylistic changes. The dashboard, on the other hand, uses panels to break content into those different regions; we could try that but I think it'd be better to have something less visually bold and more subtle.

I recommend using an 'Overview' heading first, along with a bit more whitespace around the content, then possibly consider adding a border around the entire blurb if that doesn't seem enough.

[stevieflow]

Thanks @codemacabre

re bg color - have added that here: IATI/design-system#97

I recommend using an 'Overview' heading first, along with a bit more whitespace around the content, then possibly consider adding a border around the entire blurb if that doesn't seem enough.

Yes, good idea. We're in the validator web repo now - should this also be a cross DS issue / tidy up?

[codemacabre]

Thanks @stevieflow, I'll tackle the background issue separately.

Yes, good idea. We're in the validator web repo now - should this also be a cross DS issue / tidy up?

I think this can be done without any changes to the design system, instead updating the blurb markup in each repo individually. I propose adding the following...

<section class="iati-section">
  <h2>Overview</h2>
  <div class="iati-section__content">
    <!-- Existing blurb content -->
  </div>
</section>

...to blurbs that need fixing. So here, to start with, then everywhere else that needs it.

Please could you raise individual issues and assign me so I know where to go?

[robredpath]

To my eye, the "blurb" is poor content design. Making it more prominent is certainly one solution, but I think we'd do better to make our products more self-explanatory.

For example, the "check data" card tells you very little about what checking is, what is checked, or what the results of checking might be. Instead of the blurb at the top, we might replace that text with:

Validate IATI Data

Assess data using the IATI Standard rules

• Upload a file from your computer or provide a URL
• Check against all IATI Standard rules
• Receive information about how data can be improved to ensure it is useful