Standardize Communities of Practice page header

[daniellex0]

Overview

We need to standardize the Communities of Practice page header to make it more consistent with other HfLA site pages and make it closer to the original Figma design

Action Items

• Reference the header design on Figma - make adjustments to make header look closer to this version - mobile and desktop (final designs in pink rectangle)
• Desktop
  • Make the max-width of the header paragraph 508px
  • align-items: center in .header-text--communities
  • Change the header image to max-height: 240px (instead of a set width)
  • Make the slack blurb and icon look closer to the Figma design, with more margin above the line and around the icon
• Mobile:
  • Add more margin below the "Communities of Practice" heading to match Figma (should be about 28px total)
  • Shift the Slack blurb and icon more to the left, following the Figma design

Resources/Instructions

Communities of Practice page
Figma design of Communities of Practice page (final design in pink rectangle)

Figma designs to follow (click arrow)

Desktop & mobile designs