Card layouts can look like this:
- a cover
- an image (and image caption if needed)
- a heading (choose your own H3)
- text
- a minimum height setting of 1px for the card (this will keep top and bottom aligned correctly with less spacing)
- center align EVERYTHING
make sure to apply the correct CSS class under block settings (for the ‘cover’ element) > advanced. CSS classes will be listed for each element.
A single card looks like this, make sure to use the custom css class “singleCard” with no quotation marks and no “.” class marker
H2 heading
text goes here. make sure to center align everything so it looks nice. Also don’t forget to set the cover height so that it looks right.
a 2 card layout is pictured below. Be sure to use a 2 columns layout for best effect. Also make sure you’re using the additional css class “twoCards”.
H2 heading
text goes here. make sure to center align everything so it looks nice. Also don’t forget to set the cover height so that it looks right.
H2 heading
text goes here. make sure to center align everything so it looks nice. Also don’t forget to set the cover height so that it looks right.
a 3 card layout is pictured below. Be sure to use a 3 columns layout for best effect. Be sure to use the “threeCards” custom css class as well.
H2 heading
text goes here. make sure to center align everything so it looks nice. Also don’t forget to set the cover height so that it looks right.
H2 heading too long
text goes here. make sure to center align everything so it looks nice.
H2 heading longer
text goes here. make sure to center align everything so it looks nice. Also don’t forget to set the cover height so that it looks right. more long
There is no 4 or 5 card layout, I refuse.
Marketing page ‘tables’
Marketing page tables are, likewise, just stylized ‘cards’ but with custom CSS. You can implement them by using the “fake list” custom CSS class. These should usually accompany a columned layout (2 columns is best). Start by using the 2 column layout with one column wider than the other. Use ‘fakelist-last’ custom css class on the last item to avoid bottom border on last item. REMEMBER TO SET TEXT TO BLACK IN THESE.
Marketing text usually goes here, instead I’m going to put more instructions. Make sure that you use the 2 column layout with one column wider than the other. This can be used in other formats but this is the most ideal way to handle it.
Supported elements for these are currently “lists”, “heading”, and “Paragraph” elements, more can be added and styled as needed. Be sure to also align these ‘cover’ elements ‘center’ in order for them to appear correctly. Text can be aligned however you like.
You can customize the color of the cover, add background images, adjust text color and more all within the cover settings in the default wordpress blocks editor. The DivList class should handle the rest fairly easily.
fake List Item
- one
- two
- three
fake List Item
Text looks like this. This line didn’t feel long enough so I typed this sentence to make it longer.
fake List Item
- one
- two
- three
Be sure to use ‘fakelist-last’ css class on this one
“Banners”
For all banners where the content should be centered within the 1200px width of the site, use the css class ‘middle-child’
I’m going to level with you, “banners” are bad, they don’t exist within wordpress, and they shouldn’t be as used as they (all too frequently) are. That said, sometimes you’ll have to make one.
Start with a “Cover” and set it to ‘full width’. Here you can choose your color, your gradient (if desired) or even your background image and opacity. For this example, we’re just using a plain ‘grey’ color as we’ve used in all the other examples
WHENEVER POSSIBLE use the “Media and Text” option, this will help your content align better, we’ll cover other cases in examples further below. For now let’s just focus on that.
Content can go here
an image goes over there =>
Make sure to align your items ‘middle’ within the cover for proper vertical alignment. Make sure your image is set to ‘full size’ as well.
But what if I want to put a video in my banner? First off, don’t do that. However, if you must then we’ll start with a ‘cover’ and drop in some columns. So far so good. Next, apply TO THE ENTIRE COLUMN SET the “middle-child” css class. Then put stuff in your columns. Be sure to vertically align “middle” for it to sit correctly. For the video portion, copy the embed code from YT and put it in as ‘custom HTML’.
This is your text
Your video iframe will go over there, you can set the iframe width and height directly within the html, it should be one of the first bits in the iframe code.
What about hero images? Fine if you must, Guess what, it’s a cover! Just add a background image, select some level of opacity (you can even color it or gradient it!) and then add your text. No special tags required. Remember to use the ‘full width’ option for the cover. You can also choose your height if you need more space for your hero image.
This is a hero image.
I hope you’re happy.
Tables
| Dummy Text | 42 | Dummy text | We’re going to have at least one super long header | |
| More Dummy text | This is some greeking | 36 | This is some greeking | This is some greeking |
| Sales dummy text | This is some greeking | 777 | This is some greeking | This is some greeking |
| We’re going to have at least one stupid long header | This is some greeking | 89052 | This is some greeking | This is some greeking |
| Business words | This is some greeking | 2 | This is some greeking | This is some greeking |
List Display
- This is a list display element
- as determined by the UXPIN
- I think, probably, it seems about right