SaaSFlowDocs

Module · Blog and guides

Post and Card Grid

A grid of recent blog posts or your own cards.

82 settingsPagesBlog postsBlog listings

Where it is used

Content settings

What the module says and shows. Repeaters (groups you can add items to) are marked as such.

SettingTypeWhat it does
EyebrowTextSmall label above the heading. Leave empty to hide it.Default: FROM THE BLOG
HeadingTextWrap words in [brackets] to highlight them. Leave empty to hide it.Default: Latest insights and articles
DescriptionRich textText under the heading.
Link textTextLink beside the heading. Leave empty to hide it.Default: View all articles
LinkLinkLeave empty to link to the blog itself.
Cards fromChoiceList posts from any blog, or add your own cards (for example guides, resources or pages that are not blog posts). Both use the same card options and designs.Options: Blog postsCards I add myselfDefault: Blog posts
PostsGroup · 6 settings

Which blog posts to list.

BlogBlogWhich blog the posts come from. Leave empty to use the blog being read (on a blog post) or your default blog.
ShowChoiceWhich posts to show. Related works on blog posts; elsewhere it shows the most recent posts.Options: Most recent postsMost popular postsRecent posts with a tagRelated to the post being read (same first tag)Default: Most recent posts
TagTextThe tag's name or slug, for example marketing.
Popular overChoiceTime range for popularity.Options: The past monthThe past yearAll timeDefault: The past year
Number of postsNumberHow many posts to load.Default: 6
Leave out the post being readOn/offOn a blog post page, the post itself is not listed.Default: On
CardsRepeater · 9 settings

Your own cards. What shows on each card follows the Card content settings below.

ImageImageAbout 1200 x 675px. Leave empty to show a soft color block.
TagTextA short label above the title, for example Guide. Shown when Card content > Show tag is on.
TitleTextThe card's heading.Default: Card title
SummaryTextOne or two sentences. Shortened to the Summary length set in Card content.
LinkLinkWhere the card goes. The whole card is clickable. Leave empty for a card without a link.
Read time (minutes)NumberShown with the Read time label. 0 hides it on this card.Default: 5
AuthorTextLeave empty to hide the author on this card.
Author photoImageA small round photo. Leave empty to show the author's first letter.
DateDateLeave empty to hide the date on this card.
Card contentGroup · 9 settings
Featured imageOn/offThe post's featured image at the top of the card.Default: On
TagOn/offThe post's first tag as a colored pill.Default: On
Read timeOn/offEstimated minutes to read.Default: On
Read time positionChoiceWhere the read time sits on the card.Options: Top, beside the tagBottom, with a clock iconDefault: Top, beside the tag
SummaryOn/offA short excerpt.Default: On
Summary lengthNumberNumber of characters.Default: 120
AuthorOn/offAuthor photo and name.Default: On
DateOn/offPublish date.Default: On
Date formatTextFor example MMM d, yyyy or d MMMM yyyy. Month names follow the page language.Default: MMM d, yyyy

Style settings

In the module's Styles tab: layout, color mode, background, fonts, spacing and animation.

SettingTypeWhat it does
LayoutGroup · 7 settings
Show posts asChoiceGrid: rows of cards. Carousel: one row that slides sideways with arrows.Options: GridCarouselDefault: Grid
Cards per row on desktopNumberScreens 1024px and wider. In a carousel: cards visible at once.Default: 3
Cards per row on tabletNumberScreens from 640px to 1023px.Default: 2
Cards per row on phonesNumberScreens under 640px. In a carousel, the next card peeks in.Default: 1
Show arrowsOn/offPrevious and next buttons.Default: On
Move on by itselfOn/offMoves every few seconds; pauses on hover and for visitors who turn off motion.Default: Off
Seconds per moveNumberTime between moves.Default: 5
Color modeChoice"Same as site" follows Theme settings > Color mode.Options: Same as siteLightDarkDefault: Same as site
Eyebrow styleChoice"Same as theme" follows Theme settings > Eyebrow.Options: Same as themePlain textPillGradient badgeDefault: Same as theme
Highlight colorColorColor of links, arrows and hover states. Starts as the theme's primary color.
FontsGroup · 2 settings
Heading fontFontStarts as the theme's heading font. Change it to use another font in this module only.Default: Outfit
Text fontFontStarts as the theme's body font. Change it to use another font in this module only.Default: Inter
Transparent backgroundOn/offRemoves this section's background so the page background shows through. Useful for blending sections together.Default: Off
Background colorColorLeave empty to use the theme colors for the current light or dark mode.
Background effectGroup · 6 settings
Show background glowOn/offDefault: Off
IntensityNumberHow strong the glow is. 0% hides it.Default: 60
Flowing movementOn/offPlays an entrance animation. Visitors who turn off motion on their device don't see it.Default: On
Fade out at the top and bottomOn/offFades the glow out at the edges so it blends into the next section.Default: On
Glow color 1ColorLeave empty to use the theme primary color.
Glow color 2ColorLeave empty to use the theme accent color.
Background animationChoiceA subtle moving background behind this section. Brand colors only; still for visitors who turn off motion.Options: NoneSoft bubblesAurora glowDrifting dot gridRipplesDefault: None
Animation strengthNumberHow visible the background animation is.Default: 45
Number of bubblesNumberHow many bubbles float in this section. Phones show about half of them.Default: 6
Bubble arrangementNumber0: this section gets its own random arrangement. Pick any other number to shuffle the bubbles into a new one, for example if a bubble sits behind your text.Default: 0
Header alignmentChoiceLayout of the eyebrow, heading, description and link.Options: Left, with the link on the rightCenteredDefault: Left, with the link on the right
CardsGroup · 8 settings
Card designChoiceHow each card is laid out. Side works best with 1 or 2 cards per row. Featured needs Grid layout (in a carousel it shows as Classic).Options: Classic: image on top, text belowMinimal: no card box, image and textOverlay: text on top of the imageSide: image beside the textFeatured: first card large, the rest classicDefault: Classic: image on top, text below
Image shapeChoiceShape of the card images. Overlay cards use it for the whole card.Options: Wide (16:9)Landscape (3:2)Standard (4:3)Square (1:1)Default: Wide (16:9)
Card backgroundColorLeave empty to use the theme card color.
Corner radiusNumberRoundness of the corners. 0 is square.Default: 16
Show borderOn/offDraws a thin border around each card.Default: On
ShadowChoiceShadow under each card.Options: NoneSoftStrongDefault: None
Lift on hoverOn/offCards rise slightly when hovered.Default: Off
Show arrowOn/offA small arrow at the bottom right of each linked card.Default: Off
SpacingGroup · 4 settings

Leave empty to use the theme section spacing (Theme settings > Layout).

Top padding (desktop)NumberSpace above the content on desktop.
Bottom padding (desktop)NumberSpace below the content on desktop.
Top padding (mobile)NumberSpace above the content on phones.
Bottom padding (mobile)NumberSpace below the content on phones.
Animate when scrolled into viewOn/offContent fades up as the section comes into view. Visitors who turn off motion on their device see no animation.Default: On

Interface labels

Words on buttons and for screen readers. Change them to translate the module.

SettingTypeWhat it does
Read timeTextKeep {minutes} where the number goes.Default: {minutes} min read
Previous buttonTextRead by screen readers for the left arrow.Default: Previous posts
Next buttonTextRead by screen readers for the right arrow.Default: Next posts
No postsTextShown in the page editor when the chosen blog has no matching posts. Visitors never see it.Default: No posts to show yet.

Tip

Headings support [brackets] to highlight words and | for a new line. See Editing tips.