Stacking Post Cards in Bricks

Stacking Post Cards in Bricks

This Pro tutorial provides the steps to stack posts output by a Bricks query loop so they stick on top of the previous one when scrolling.

Note: ACSS classes and variables are used in the provided JSON. If you do not use ACSS, you would have to either define the missing class and variable definitions or replace them with your own or those from another framework.

Step 1

Edit a Page/template where you would like to show the stacked posts with Bricks.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 525 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Click-type Infinite Scroll in Bricks Builder

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…
Categories:
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Categories:
Tags:
GSAP in Bricks: a concrete example

GSAP in Bricks: a concrete example

In this tutorial, we're going to create a custom timeline with different popular GSAP animations and integrate it into the Bricks Builder. Introduction We released…
Categories:
How to Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Categories:
Tags:
Pro
Meta Box/ACF Images Staggered Grid Gallery in Bricks

Meta Box/ACF Images Staggered Grid Gallery in Bricks

Showing images from two Gallery-type of ACF or Image Advanced-type of Meta Box fields in a staggered grid layout.
Floats in Bricks for Wrapping Text Around Images

Floats in Bricks for Wrapping Text Around Images

In the Bricks Facebook group a user asks: Float, left or right? Just a quick question. Am I going crazy or can't I specify a…
Categories:
Tags:
Sticky Element using Position Sticky

Sticky Element using Position Sticky

If you are looking to make an element, typically, the site header sticky whether it is at the top of the page to begin with…
Categories:
Tags:
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Categories:
Tags:
Pro
“Pro” Category Ribbon for Posts in Bricks

“Pro” Category Ribbon for Posts in Bricks

This Pro tutorial provides the steps to show a "Pro" ribbon for posts that are categorized under the "Pro" category when using Bricks builder. Step…
Categories: