Recruitment Marketing

Public

Adding a blog posts list block

1. In the Page Editor, click the Add Row icon to add a row of the relevant dimensions. Alternatively, if a Blog Posts List block already exists, navigate to it and click the Edit Block button.
2. Within that row, click the Add Block button.
3. Select Blog Posts List from the drop down.
4. Click the Edit Block button.
5. In the Blog Posts List pop up, configure as required. There are two options for the layout - list layout and card layout. Refer below for design options.
6. Click the Save button to keep the settings.
   
   

Design options

List Layout

Card Layout

If set, each card will contain the image (if present), title and truncated summary. They will appear top down and then left to right.

Configuring card columns

By default there are three card columns above a screen width of 576px, below this there is a single column.

By adding the CSS Class side panel to the block this will change the default to a single column.

Further configuration of the number of columns can be done using CSS in the page's theme. The number of columns is responsive and can be configured to change as the screen width changes. In this case it's three columns above 992px and two above 576px.

@media (min-width: 576px) {
  .posts-cards-cols {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .posts-cards-cols {
    column-count: 3;
  }
}