Component

Alternating Content Panel

SCSS Location: /styles/scss/partial/_lists.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

Text and image block with alternating layouts.

Guidelines

Item Design Guidelines Not Provided

Usage

  • Default presentation is an image above a text block on small screens; the text block overlaps the image on large screens.
  • The default presentation is text aligned to the left. Use the ab-content-panel--right modifier class to align text to the right.
  • Use the ab-content-panel--stylized modifier class on the outer container when a stylized icon is present.
  • Use the ab-content-panel__content--centered modifier class to vertically center the content.
  • Use the ab-content-panel__content--lead modifier class to create larger paragraph (p) text.
  • Use the ab-content-panel__content--md modifier class to increase the content to the medium width.
  • Use the ab-content-panel__content--lg modifier class to increase the content to the large width.

Default

Alternative text describing the image.

Philanthropic Organizations

Our Corporate Philanthropy team is made up of a dedicated group of employees from around the company who help support our philanthropy partners with the amazing work they do. And our employees around the world – they are the positive energy that fuels and supports the all the important projects that make a direct impact on our communities!

With video player, expanded content area, and lead text

From our Global Day of Service to exciting work with our five philanthropy partners, our employees across the globe are passionate about making a positive impact in the communities where we work and live.

  • Governments are expanding indirect taxation, mandating more frequent and detailed tax reporting
  • Businesses are entering new geographies and extending their supply chains
  • Technologies are increasingly capturing transaction data that impacts taxable goods and services

Reversed

Alternative text describing the image.

Philanthropic Organizations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu metus sapien. Phasellus laoreet arcu et lorem laoreet vestibulum. In malesuada erat sed eros vehicula congue. Phasellus ac fermentum eros, vitae maximus metus. Nam eu consectetur erat, in venenatis orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu metus sapien. Phasellus laoreet arcu et lorem laoreet vestibulum. In malesuada erat sed eros vehicula congue. Phasellus ac fermentum eros, vitae maximus metus. Nam eu consectetur erat, in venenatis orci.

Stylized

Alternative text describing the image.

“We will accelerate global commerce, one transaction at a time.”

David DeStefano
President & CEO