600 West

Flip 

<div id="" class="Flip flex flex-column relative w500">
    <div id="" class=" align-center absolute bg--neutral-100 bg-cover flex flex-column h-100p justify-center pa500 w-100p" style="background-image:url(https:////media.sproutsocial.com/uploads/casio-enterprise@2x-100.jpg)">

        <img id="" class="image  " alt="Tito&#x27;s Vodka" style="" src="https://media.sproutsocial.com/uploads/casio-logo-1-1.svg" />

        <a class="c--neutral-0 db mt500 tc underline w-100p" href="https://sproutsocial.com/insights/case-studies/titos/">
    Discover Casios's ROI
</a>

    </div>

    <div id="" class=" relative tc pa500" tabindex="-1">
        <p id="" class="f600 fw-semibold">
            Discover Casios's ROI
        </p>

        <p id="" class="f300">
            See How Casio G-Shock Proved Social ROI by Increaseing CTR 218%
        </p>

        <a href="https://en.wikipedia.org/wiki/Force_Trainer" class="button Button--secondary mt400 ">
        View Case Study
    </a>

    </div>

</div>
 
<div id="{{id}}" class="Flip {{modifier}}">
  {{> @children}}
</div>
 
{
  "modifier": "flex flex-column relative w500",
  "children": [
    {
      "component": "div",
      "context": {
        "style": "background-image:url(https:////media.sproutsocial.com/uploads/casio-enterprise@2x-100.jpg)",
        "modifier": "align-center absolute bg--neutral-100 bg-cover flex flex-column h-100p justify-center pa500 w-100p",
        "children": [
          {
            "component": "image",
            "context": {
              "src": "https://media.sproutsocial.com/uploads/casio-logo-1-1.svg",
              "alt": "Tito's Vodka"
            }
          },
          {
            "component": "link",
            "context": {
              "href": "https://sproutsocial.com/insights/case-studies/titos/",
              "text": "Discover Casios's ROI",
              "modifier": "c--neutral-0 db mt500 tc underline w-100p"
            }
          }
        ]
      }
    },
    {
      "component": "div",
      "context": {
        "modifier": "relative tc pa500",
        "tabindex": -1,
        "children": [
          {
            "component": "p",
            "context": {
              "modifier": "f600 fw-semibold",
              "text": "Discover Casios's ROI"
            }
          },
          {
            "component": "p",
            "context": {
              "text": "See How Casio G-Shock Proved Social ROI by Increaseing CTR 218%",
              "modifier": "f300"
            }
          },
          {
            "component": "button",
            "context": {
              "href": "https://en.wikipedia.org/wiki/Force_Trainer",
              "text": "View Case Study",
              "modifier": "Button--secondary mt400"
            }
          }
        ]
      }
    }
  ]
}
  • Content: 
    @import "../../axioms/Animation";
.Flip {
    perspective: 120em;
}
.Flip > * {
    transition: transform $transition-time-500;
    transform: rotateY(.001deg); // Insures promotion to own layer for rendering
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}
// Front side flips when hovered or other side has focus
.Flip:focus-within > :first-child:not(:focus-within),
.Flip:hover > :first-child {
    transform: rotateY(180deg);
}
// Back side shows when hovered or focused
.Flip:not(:hover) > :last-child:not(:focus-within):not(:focus) {
    transform: rotateY(-180deg);
}
  • URL: /components/raw/flip/Flip.scss
  • Filesystem Path: components/molecules/Flip/Flip.scss
  • Size: 623 Bytes

Flip

Turns first immediate child into the front and the 2nd immediate child into a back. with hover causing a flip.

Best Practices

  • Always use 2 children, never more never less. They can be whatever you want though.
  • Add tabindex="-1" to back side container, explained under Accessibility below.
  • Add .absolute to one of the children to pull one of the children up.

Accessibility

First rule of the Flip component, don’t use the flip component.

One issue that comes up, is that the card won’t flip when reading with a screen reader until you get a focusable element on the back (like a link or button). To fix that, add tabindex="-1" to whatever wrapper element you’re using for the back.

For example

    <div class="Flip">
        <div>
            <p>Check out the other side!</p>
        </div>
        <div tabindex="-1">
            <p>Agencies use us!</p>
            <a href="https://sproutsocial.com/agencies/">Read More</a>
        </div>
    </div>

This is still a problem for Firefox, but it’s the best we could do.