Card-Flip Functionality

You may have seen some system widgets that flip over to show more content when clicked (such as the Business Snapshot widget).

This is often referred to as a card flip or back of the card/widget. Custom widgets can also use this card flip functionality. This section provides the snippet to create a link that triggers the card flip and the contents of the card's backside.

Full Example

<div flipper="{addDimensions: true, openButtons: '.ds-flipper__open'}">       
    <div style="font-size: 10px; text-align: center;">              
        <a class="ds-flipper__open">Learn More</a>       
    </div> 
    
    <div class="card card--dark">             
        <div class="card-header">                    
        
            <button class="btn btn-icon btn-link card__close-button ds-flipper__close">                          
                <span class="zmdi zmdi-close"></span>                    
            </button>                    
            
            <h3 class="card-title">@String("Back Title Goes Here")</h3>                    
        </div>                    
        
        <div class="card-body">                           
            <p class="f-s-16">@String("More text can go here.")</p>                    
        </div>        
    </div>
</div>

Let's break this snippet down into sections.

1. Trigger the flip

<div style="font-size: 10px; text-align: center;">              
      <a class="ds-flipper__open">Learn More</a>       
</div>

The <a class="ds-flipper__open">Learn More</a> represents a link in the widget code that triggers the card flip.

2. Add closing functionality

 <button class="btn btn-icon btn-link card__close-button ds-flipper__close">                          
      <span class="zmdi zmdi-close"></span>                    
</button>

The <button> tag and inner <span class="zmdi zmdi-close"> icon creates the “X” to close the card.

3. Add card top title

<h3 class="card-title">@String("Back Title Goes Here")</h3>

The <h3 class="card-title">@String("Back Title Goes Here")</h3> is where you can put a headline or title at the top of the card next to the close icon.

4. Add card back content

<div class="card-body">                           
      <p class="f-s-16">@String("More text can go here.")</p>                    
</div>

The <p class="f-s-16">@String("More text can go here.")</p> inside the <div class="card-body"> is where the rest of the content goes that you want shown on the back of the card.