Section Heading

[martypowell]

Component Name

SectionHeading

Description

An alternate heading the is used to describe a section of a page. Primarily a homepage component.

Required and optional properties

• text - string - the actual heading text
• icon - string - icon to be displayed above the heading text
• image - string image url that you want to display

Note: You will only want to specify an icon or an image, but in the case you specify both, an image will take precedence.

Example or Mockup

Image

Icon

Acceptance Criteria

Rule Based:

• Line must be CSS-based (see link under Additional Context for a solution).
• Must automatically change style depending on the section color it appears it (default vs. dark)
  • Default: Font and icon color is black; line color is gray-light
  • On dark: Font and icon color is white; line color is pale blue-light.
• Must render a font awesome icon or an image.
• Section name should appear on the next line.
• Heading font is Montserrat 600.
• Should be styled identically for h1, h2, h3 to maximize potential reuse regardless of page structure.
• Must follow UX standards
• Semantically correct - Must follow W3C standards
• Matches Mockup Styles

Additional context

This was a tricky problem to solve, think this might be of some help https://codepen.io/martypowell/pen/Zqdome

[martypowell]

Completed in sprint 2, but one existing issue is still visible, will close after that.