Image Backgrounds
Split Sections

49W—This is a 50-50 split section via Image Background.
Image Left, Full Bleed. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

49W—This is a 50-50 split section via Image Background.
Image Right, Full Bleed. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

48W—This is the same as 49W but with Content Alignment Vertical set to Space Between.
Image Left, Full Bleed. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment is set to Space Between. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

48W—This is the same as 49W but with Content Alignment Vertical set to Space Between.
Image Left, Full Bleed. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment is set to Space Between. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

47W—This is a 50-50 split section via Image Background with inset.
Image Left, Margins. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

47W—This is a 50-50 split section via Image Background with inset.
Image Right, Margins. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

46W—This is the same as 47W but with Content Alignment Vertical set to Space Between.
Image Left, Margins. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical is set to Space Between. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

46W—This is the same as 47W but with Content Alignment Vertical set to Space Between.
Image Right, Margins. This is a 50-50 split via Image Background. Content Alignment Horizontal sets photo side. The Content Alignment Vertical is set to Space Between. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

44W—This is a 23-77 split via Image Background.
Image Left. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

44W—This is a 23-77 split via Image Background.
Image Right. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

43W—This is the same as 44W but with Content Alignment Vertical set to Space Between.
Image Left. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

43W—This is the same as 44W but with Content Alignment Vertical set to Space Between.
Image Right. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

42W—This is a 23-77 split via Image Background with inset border.
Image Left, Margins. This is a 23-77 split via Image Background. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

42W—This is a 23-77 split via Image Background with inset border.
Image Right, Margins. This is a 23-77 split via Image Background. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

41W—This is the same as 42W but with Content Alignment Vertical set to Space Between.
Image Left. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

41W—This is the same as 42W but with Content Alignment Vertical set to Space Between.
Image Right. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

39W—This is a 36-64 split via Image Background.
Image Left. The Content Alignment Vertical controls content alignment. The text wrapper has a padding of @spacing. To be used with any photo size; Section Height controlled S/M/L/#.

39W—Vertical Alignment Center This is a 36-64 split via Image Background.
Image Left. The Content Alignment Vertical controls content alignment. The text has a max width of 26rem and is centered horizontally and vertically. To be used with any photo size; Section Height controlled S/M/L/#.

38W—This is the same as 39W but has inset background on mobile only.
Image Left. The Content Alignment Vertical controls content alignment. The text has a max width of 26rem and is centered horizontally and vertically. To be used with any photo size; Section Height controlled S/M/L/#.