EMBL Grid vs left positioned content pages

[khawkins98]

A recurring bit of feedback and an "itch" is that the embl-grid feels not-quite-right when used with the vf-hero and simple page content — example:

---

---

These are currently often manually overridden like vf-grid vf-grid__col-3 > vf-grid__col--span-2:

---

---

Functions like:

---

This current situation presents a number of issues:

• The workaround is a bit of a hack that is cumbersome to do and more subject to accidental breakdown
• and, more impotently: it creates inconsistency across EMBL pages and confusion around the correct way to make pages

Note

The embl-grid is still of use on "inside" pages where there is a well thought-out architecture; examples:

So...

How can we address the visual issue and support the use case when the vf-hero is used on a page with simple content?

After discussing with the Digital Team, here's the current thinking.

1. We standardise the "left layout" by making a “vf-content--layout” that has the 2-over-3 columns with a sidebar (3rd column)
2. vf-content--layout is only recommended for use with:

• “tail end” pages that are at the end of a user’s journey, and have a vf-hero
• do not use on landing pages/gateway pages to other content (Gateway pages should have a more thought out content architecture and be able to make use of the embl-grid)

We're interested to know if this also seems like a workable approach for other users.

[khawkins98]

This "unofficial" grid is also coded into the top of every group microsite landing page:

[filipe-dias]

Not much traction on the subject so far :(