Partial Component

Flip Card

The Flip Card partial creates an interactive card that reveals additional content when hovered. It supports both front and back content areas with text -, icon -, and call-to-action partials.

Manifest

{
  "name": "flip-card",
  "type": "_partials",
  "styles": ["flip-card.css"],
  "scripts": ["flip-card.js"],
  "requires": ["ctas", "text", "image", "commons"]
}

Configuration

cards:
  - front:
      icon: 'paperclip'
      text:
        leadIn: 'Simple Text Section'
        title: The Card Title
        titleTag: 'h3'
        subTitle: ''
        prose: |-
          Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna.

    back:
      text:
        leadIn: ''
        title: The Back Title
        titleTag: 'h4'
        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: 'http://glinka.co'
          label: 'Learn More'
          isButton: true
          buttonStyle: 'primary small'

Configuration Options

Property	Type	Required	Description
`front.icon`	object	No	Icon configuration for front side
`front.text`	object	No	Text content for front side
`front.ctas`	array	No	Call-to-action buttons for front
`back.text`	object	No	Text content for back side
`back.ctas`	array	No	Call-to-action buttons for back

Example

Usage in Templates

{% from "components/_partials/flip-card/flip-card.njk" import flipCard %}

<ul class="flip-cards-list">
  {% for card in section.cards %}
  <li class="flip-card-wrapper">{{ flipCard(card) }}</li>
  {% endfor %}
</ul>

Notes

Full keyboard navigation and ARIA labels
Hover or press Enter/Space to flip
Rotate icon shows interactive nature
CSS-powered flip animation