search

ebiwd / EBI-Pattern-library

Please head to the new pattern library:
http://www.ebi.ac.uk/style-lab/websites/patterns/
2 stars 2 forks source link

In need of an "intro" pattern #8

Closed khawkins98 closed 7 years ago

khawkins98 commented 7 years ago

This comes from a recent discussion with External Relations on the new draft Jobs page: http://wwwdev.ebi.ac.uk/about/jobs

image

This is somewhere between a "normal" page and a brochure page and we need to highlight the intro narrative.

This is the "intro" on the current site (a pattern exclusive to the corporate Drupal site).

image

We don't wish to import this pattern as-is. It does not stylistically jive with the rest of the visual language and creates a "boxing" effect, further isolating the navigation on the right-hand side.

khawkins98 commented 7 years ago

And this was the worked up pattern that we're looking to use.

We highlight the intro with white-space. So it's visually consistent, easy to focus on the narrative, and does not isolate the right-hand submenu.

image

khawkins98 commented 7 years ago

For the pattern, getting away from "intro box" to "intro unit" as a semantic name.

CSS Class: .intro-unit

Basic structure:

<div class="intro-unit">
   <h2>Main title
   <h3>Sub-title
   <p class="lead">A paragraph of intro text
   <a class="readmore">recommend link to gauge engagement
</div>

Assorted changes to implement in this and other repos:

khawkins98 commented 7 years ago

And the basic documentation for the pattern: https://ebiwd.github.io/EBI-Pattern-library/components/intro-unit/

khawkins98 commented 7 years ago

New url for pattern: http://www.ebi.ac.uk/style-lab/websites/patterns/intro-unit.html