I came across a blog created 100% with Notion (since then, the original blog has been removed) and the list view really captured my attention. It was simple and gave a notebook-style feel – this is exactly what I wanted! If you are reading this post then at some point in March 2022 you would’ve seen me implement this design on my homepage.
Concept
If you struggle with wrapping your head around the HTML view for my Notion-style blog post list, then the diagram I put together should hopefully help you understand what the various layers look like. Essentially there are 4 layers which make up the effect (not including the Repeater element).
Note: I am going to skip most of the basic styling portion and will jump straight to explaining the layering.
The steps
1. Repeater setup and wrapper (layer 1)
If you are familiar with the Repeater element then you can pretty much ignore this step. But for those of you who have not really used a repeater before, first I dropped in a Repeater element from the Oxygen Builder pane and then inside the Primary Settings for the Repeater element, I selected Custom Query and set Post Type = Post. You can of course change this as required for your needs.
I used the default Repeater div to act as my wrapper for all of my other divs. I set the Repeater div to position: relative, display: flex, flex-direction: row, added padding and bottom margin. I also set flex-direction: column for screen sizes below 767px. I then dropped in 2 divs into the Repeater div.
2. Dynamic post content (layer 2)
I set the first div within the Repeater Div to have width: 65% (d.Post Heading from the diagram above) and the second neighbouring div (d.Date from the diagram above) to have width: 35%. Also, both width: 100% on any screen sizes below 767px.
I dropped a Heading (h2) element inside d.Post Heading and inserted dynamic data for Post Title (without link – more on this later). I dropped 2 text elements inside for d.Date and d.Category (I’ll explain later why it looks different in the diagram) and selected each text element and inserted dynamic data for Date and Category (with link!) respectively.
3. Link wrapper (layer 3)
I inserted a link wrapper (d.Link Wrapper from the diagram) and set position: absolute with a width: 100%, height: 100%, top: 0, left: 0, right: 0, bottom: 0, and z-index: 1. I set the link wrapper link to dynamic data and selected post link. I then styled the hover styles for this.
4. Category link (layer 4)
Remember in step 2 we inserted the dynamic data for Category? I essentially pushed this dynamic data text element layer (d.Category) above all of the layers with z-index: 2. Of course, I then added hover styles for this.
Final thoughts
This was such a cool and easy effect to try to replicate as I could literally think of 7 different ways of doing this. But the way I mentioned in the post above probably is probably the way most people would do it. I like the fact that the entire wrapper will take you straight to the blog post almost regardless of where you hover over the wrapper but the moment you hover over the category, you get taken to the category’s archive page.