Flip Cards

Interactive flip card components with front and back content, icons, and CTAs. The flip cards are rendered in a flex container with responsive layout and smooth flip animations.

Simple Text Section

The Card Title

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

This is the back

Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Go Apple
Simple Text Section
The Second Card Title
Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo.
The Back
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Simple Text Section
The Third Card Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus.
The Back
Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
Simple Text Section
The Third Card Title
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.
The Back Title
Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Learn More

Configuration

- sectionType: flip-cards
  containerTag: aside
  #more settings

  cards:
    - front:
        icon: 'activity'
        text:
          leadIn: 'Simple Text Section'
          title: The Card Title
          titleTag: 'h3'
          subTitle: ''
          prose: |-
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
      back:
        text:
          leadIn: ''
          title: This is the back
          titleTag: 'h3'
          subTitle: ''
          prose: |-
            Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        ctas:
          - url: 'https://apple.com'
            label: 'Go Apple'
            isButton: false
            buttonStyle: 'primary'

    # other flipcards

Configuration Options

Card Layout

Property	Type	Required	Description
`cards`	array	Yes	Array of flip card definitions

Individual Card Properties

Property	Type	Required	Description
`cards[n].front`	object	Yes	Front side content of the card
`cards[n].back`	object	Yes	Back side content of the card

Front/Back Content

Property	Type	Required	Description
`icon`	string	No	Icon name from lib/layouts/icons (front side only)
`text`	object	No	Text content with leadIn, title, titleTag, subTitle, and prose
`ctas`	array	No	Call-to-action buttons (typically on back side)