The Overlap Card

The inspiration for this card came from a block layout available from Qubely.

While this seems simple enough it does require a couple lines of custom CSS.

The elements

  • Two nested columns (1/1 and 90%)
  • Top column
    • Post card image in the top.
    • Custom css: z-index to 0.
  • Bottom Column
    • Dynamic data for the category, title, meta element and content element set to excerpt.
    • Top margin set to -80px,
    • Padding set to 30px.
    • Flex stretch (equal heights)
    • Box shadow: 34px 0 28 -20 rgba(0,0,0,.15)
    • Custom CSS: margin left and right auto
Copy to Clipboard

For information of the category labels see Adding and Styling Top-level Category Labels.

Copy to Clipboard