Components
Navbar
When you add the Navbar from the Components, you have to manually add the "Burger Open", "Burger Close", "Burger Hover" and "Burger Hover Out" animations.
.svg)
.svg)
BloG Navbar
When you add the Navbar from the Components, you have to manually add the "Burger Open", "Burger Close", "Burger Hover" and "Burger Hover Out" animations.
.png){kind=icon}
Images (and ratios)
Images are made of one div handling a padding-top that fixes the ratio and has overflow:hidden (for the hover effect). The hover animation is attached to this div. Inside is an image that can be connected to a CMS item (for image and alt text).
3:4
1:1
16:9
4:3
Blog Post Card
Menu de la semaine
Blog entry title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Publié le
01/01/2022
Par
Blog posts thumbnails
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Sections
Each page must be divided into sections. The "Section" class enables to give them all the same paddings.
All the section content should be put inside a "Container" div to get a max-width for bigger screens.
The Global Class "Vertical Centered" can be usefull both on sections or containers.
Sections can be visually separated using a div with the "Section divider" class.
When a section is right below the Hero Section (which can have an overlaping Post Card), the "Below Hero" class adds an extra top padding.
All the section content should be put inside a "Container" div to get a max-width for bigger screens.
The Global Class "Vertical Centered" can be usefull both on sections or containers.
Sections can be visually separated using a div with the "Section divider" class.
When a section is right below the Hero Section (which can have an overlaping Post Card), the "Below Hero" class adds an extra top padding.
Post Lists
To display several posts on a section, you'll use a Collection List and add a special class to the Collection List element. Use "Third List" if you want a display starting with 3 posts on destkop, or "Quarter List" if you want a display starting with 4