Card patterns
Create reusable card designs for Collections and other content listings.
A Card pattern controls what each item in a content listing shows and how those cards look. Create patterns in the Cards section under Design, then choose one from Card Pattern in a Collection, Event Instances, or another block that displays content as cards.
You do not add a Card directly to a page or type its title and image by hand. The listing supplies each card's content from the event, post, person, or other item. The pattern decides which of those details appear and how it arranges them.
Create a pattern
Go to Design, then Cards, and select Add card pattern. Give it a Name and choose its Website Builder Theme. Set Collection to the family it is designed for: Events, Posts, Blogs, People, Seasons, Series, Works, Venues, Organizations, Pages, or Generic.
The pattern appears only where that content family applies. Give patterns clear names such as Event grid or People directory so editors can recognize them in a block's Card Pattern picker.
Details
Every pattern can show or hide the item's Title and Description / Subtitle. Other controls follow the selected collection:
- Events: Event Date (Long or Short), Event Venue, Event Times, Season, and Series.
- People: Role and Pronouns.
- Posts: Author, optional author image, Publish Date (Long or Short), Categories, and Blog.
- Venues: Address.
Most details also have a Position. Place them in Tags, Body, Footer, or Details, depending on the field. The content still comes from each item. The pattern only chooses whether and where to show it.
The Button group can add the same call to action to every card. Turn on Show Button, choose its Position, set the default Button Text, choose a Button Pattern, and optionally add an icon before or after the text. The listing still decides what happens when a visitor opens the card.
Layout
The Layout tab sets the card's structure:
- Layout: Media Background, Media Header (Vertical) (default), or No Media.
- Height: Fill (default) to align cards in a row, or Auto to fit each card's content.
- Aspect Ratio: Portrait, Square (default), Landscape, or Wide.
- Media: use Cover or Fit. Keep the image inside the card padding, or let it run to the edge. Add a color, gradient, blur, grayscale, or sepia overlay.
- Structure: align content at the top, center, bottom, or with space between. Set its horizontal position, padding, and the gap between sections.
Separate groups style the Tags, Title Stack, Body, Footer, and Details. They control text size, uppercase treatment, alignment, and how the pattern shapes and positions small labels. Show Detail Label prints an attribute's label beside its value.
Appearance
On Appearance, choose a Background Color Scheme from the Website Builder theme. Turn on Custom Colors to set a specific background and text color instead. Border adds or removes the card border.
Custom attributes
The Custom Attributes tab can add values from your own custom attributes. Choose an attribute and place it in Tags, Title Stack, Body, Footer, or Details. Only items with a value for that attribute have something to show.
Example
Create a pattern named Event grid, set Collection to Events, and show the title, date, and venue. Put the date in Body and the venue in Footer. On Layout, choose Media Header (Vertical) with a Landscape image and Fill height. Save the pattern, then choose Event grid from a Collection block that lists events.