A collection of Post Card designs. While the code is provided to allow you to quickly build the same layout, they are provided as you see here and as a result there may be settings that will not apply to your site.

Section Divider Card

This card turned out to be a very easy implementation. Setting the background color of the card and the section separator were the most complicated part.

The elements

  • Post card image
  • Section separator
    • Big triangle
    • Height: 80px
    • Margin: -80px 0 20px 0
  • Title
  • Content – excerpt
Copy to Clipboard
  • The latest version of Avada released on October 18th, 2021, introduces a vast array of new features and the much anticipated Avada Studio that will make building websites faster and more intuitive

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
Copy to Clipboard

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

  • By |0.5 min read|0 Comments|

    The latest version of Avada released on October 18th, 2021, introduces a vast array of new features and the much anticipated Avada Studio that will make building websites faster and more intuitive

Small news feed with image

In working on a newspaper type layout, I needed a basic layout with an image. This is recommend for a 1/3 column or larger. Smaller columns will require font adjustments for the title. When you add this using the post cards element, you must set the number of columns to 1 in order for the layout to work as needed.

This does require custom CSS.

The elements

  • Two nested columns (4/5 and 1/5)
  • Left column
    • Title element
    • Date
  • Right column
    • Background image set to dynamically load the featured image
    • Avada adds a blank image if the column is empty which causes accessibility errors. Add separator with no margin and styling.
    • Custom css:
Copy to Clipboard
Copy to Clipboard
  • October 14, 2021

  • October 11, 2021

  • October 8, 2021

  • September 12, 2021

  • August 22, 2021

Small news feed

Similar to the previous listing without an image, but intended for smaller columns. I created a card for dark and light backgrounds and slightly different font settings.

The elements

  • Left column
    • Title element
    • Date
Copy to Clipboard
  • August 22, 2021

  • August 1, 2021

  • September 12, 2021

  • July 9, 2021

  • September 7, 2021

  • August 22, 2021

Carousel Card

Very simple layout specifically for creating a news carousel. If you don’t have limited in place for excerpt text I would not include it as it causes the layout to shift, but it is included here for demonstration purposes.

The elements

  • Main container
    • 10px border radius
    • Box shadow
  • Post card image
  • Nested 1/1 column
    • Padding:16px
    • Title
    • Meta – category, author, reading time
    • Content element set to excerpt
Copy to Clipboard

The BBC

These cards were inspired by the BBC website – one of my favorite news designs.

The elements:

  • Dynamic background image with gradient
  • Nested column
    • Title
    • Excerpt
  • Dynamic text fed by terms – category. On the site where this was used, it is fed with custom taxonomy information.

Small Cards

The small cards are for the additional stories. They use the same layout as above without the excerpt. In the layout I used, since the large and small were side by side, I added fixed heights to get the alignment correct: 400px for the large card and 208px on the small. I also removed the padding and margin from the post cards list

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
  • The latest version of Avada released on October 18th, 2021, introduces a vast array of new features and the much anticipated Avada Studio that will make building websites faster and more intuitive