BBB-Posts Block

Note: The colour/thickness of the posts bottom border and the space between posts is defined in the CSS inside the parent row Custom CSS box. All other styling is set within each block. Don’t forget to select your categories in the posts blocks, and link each button to the relevant category archive.

Note: This posts block is flexibly designed so you can show more than just the title over your featured images. Switch on the meta data and/or the excerpt if you wish, it’s all prestyled. If you find there isn’t enough vertical space to show your content, adjust the image ratio in the post block settings to make posts taller. It’s also fully responsive with no need for media queries. The number of columns will automagically adjust to the device size.

Note: You need to leave the columns on the posts block layout settings as 3 on desktop and 2 on tablet for the alternating feature to function.

Note: The circles and lines in this block will adopt your primary accent colour. To change this, replace the var(–global-palette1) value everywhere you see it in the CSS toggle of the parent row.

Note: You need to leave the layout settings at 1 column and the number of posts at 3 for the grid layout to function correctly.

Note: If you would like to change the size of the images you can adjust the variables at the top of the CSS in the Custom CSS toggle of the parent row. At the top you will find two variables:

:root {
    –bb-latest-posts-3-image: 150px;
–bb-latest-posts-3-image-mobile: 120px;
}

Adjust the values as you like.