Update Alignment on Primary & Bannered Campaign Pages

[beccaklam]

Update the alignment on the Bannered Campaign Pages so the user's eye doesn't have to bounce around so much.

• Design has been finalized
• Link to original design ticket: Primary page banner spacing and alignment #2935
• Link to Redpen: https://redpen.io/p/eu7e43fa328483dfb7
• Design changes been merged into the master Sketch file (you can find this file in the Foundation Site file on the Campaigns page, designs are titled 'New Bannered Campaign Alignment')
• Desktop and mobile medium mockups are included below (mobile should remain the same):

Requirements Checklist:

• "Cut out" should take up 8 columns
• Increase spacing between explainer text and subnav to 48px

Desktop

Medium

[mmmavis]

@beccaklam question regarding the Medium mockup you included - did you mean for devices that are in between 576px to 767px (Bootstrap's "small devices")? Our nav doesn't "collapse" for tablets (Bootstrap's "medium" devices) but in your mockup I see hamburger icon / collapsed nav.

(update: nvm I think I confused myself with mobile nav vs zen nav)

https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

[kristinashu]

Mavis your too fast lol!

Just a couple notes that I think Rebecca was going to update the ticket with tomorrow:

• this should be for all pages that have that banner so both Bannered campaign pages & Primary pages like /about
• I think we also want to add some space below the intro text and above the subnav but Rebecca will add specs for that tomorrow

[mmmavis]

I have WIP review app for testing here: PR #3025 If it's easier - we can stay after stand tomorrow for quick discussion. Otherwise updating this ticket will work too.

[beccaklam]

Here's a mockup of About (though, now that I think about it, Fellowships uses the Primary Page template too?). Also I updated the Requirements Checklist at the top ^

[beccaklam]

@mmmavis Checked out your PR and it looks good. Let's stay on after stand to chat through if we need the other adjustments I suggested in the Requirements Checklist. cc: @kristinashu

[beccaklam]

@mmmavis The intro text looks good, once the spacing is implemented between the intro text and the subnav (only on pages with subnav for now?) let me know and I can check it before approving the PR. I looked at pages without the subnav and it looks like they may benefit form having a visual break (i.e. a line) in between the intro text and body copy but we can file a separate implementation ticket for that.