Flip Card example

Front Label of Flip Card is here

This is the info on the back of the card

More
Front Label

Back Label of Flip Card

More
Card image size required: 200 x 250 pixels

Instructions

Page required:

You need to create a page to display your flip card information.  To do this go to Add Content - Page - Content with block added on page.  If you do not see this option on your site, please create a Jira ticket to request that we add this option for you.

Blocks and Formats required:

1) You need a block and format in order to display the flip card information on a page.  You need to use

  • 2012 Design Master / shared green blocks / blocks
  • _cms / formats / flipcards

This above pairing of block and format can be put in any region that is part of the centre content of a page (e.g. 001 Block region, 002 Block region, Above Default, etc.)   If you do not see this block or format on your site, please create a Jira ticket to request that we add this option for you.

Once you have the flipcards format on your site, you may need to edit it before your images will display. 

  • Edit the file in folder _cms/formats/flipcards
  • Confirm that the line beginning <xsl:attribute name="style">background: url('https://  has your site's url e.g. <xsl:attribute name="style">background: url('https://wts.uwo.ca/
  • Note* Your images must be published before the flip card cards images will render in Cascade.

If you require assistance in editing this format, please create a Jira ticket.

2)  You need a block where you can enter your flip card information.  You need to use

  •  _cms / blocks / xhtml / flip cards content

This is block that you edit to add your specific flip card content.  It is then attached to the page in the Block Listing Information section.  If you do not see the flip card content block on your site, please create a Jira ticket to request that we add this option for you.

3) You need a block for the additional CSS required for the flip cards.  You need to use

  • _cms  / blocks / xhtml / flipcards css

This block must be put in the Extra CSS in Head region on your page. If you do not see this block on your site, please create a Jira ticket to request that we add this option for you.

NOTE:  Flip card images will not render in Cascade until the images are published live.

Published on  and maintained in Cascade.