PLP banner

Hero medium height, 1/3 width, .plp-banner on column class, left aligned. Rounded corners (optional)

See https://www.figma.com/file/qd44yyW7YNzRIZXxOuS1Ne/Pop-Sockets-Page-Layouts?node-id=1212%3A24290 for margin/spacing

Dimensions: are: 2880x704 (desktop goes over if full bleed)

Mobile dimensions with this setting are 416x250 (w768)

No mobile image can be added for heroes. You could use a popsocket hero banner in a column if needed.

Background color defaults to medium gray (in SCSS), type is default brand color. These can be changed with SCSS updates.

Checklist:

  1. Column Component has class plp-banner
  2. Hero component added, Make sure to change the following: SEO, Name/Meta descriptions, asset ID, site assignments. Make sure it is chromeless
  3. Subtitle has H1, and inherits headline-m styles.

2 Column Hero and Image with Text

Use 2 column with Hero + Image with Text to give custom classes and sizing to the image. Mobile order can be controlled, width of the text/image can be customized.

Subtitle

Title

Body Text

2 Column, Left column 3/12 width, Right column on top for mobile

2 Column, no gutters

3 Column

4 Column, 1 Column on Mobile

I strive to create work that is positive and lighthearted... lots of what I make is about love or friendship.

-Nina Palomba