Post Cards
The Post Cards block is a versatile content module that highlights your latest updates, announcements, or articles in a visually appealing and organized layout. It lets you showcase headlines, brief summaries, and direct links to full content, making it effortless for visitors to quickly find and engage with the newest news on your site.
When to Use This Component
Use the Post Cards block for highlighting multiple pieces of content in a visually organized way, helping visitors quickly find and engage with your site’s most important updates.
USE CASES OR SCENARIOS
- To highlight the latest news, announcements, or blog posts on your site.
- When you want to give visitors a quick overview of multiple updates without overwhelming them.
- To create a visually organized section that encourages users to explore full articles.
- For pages where keeping content fresh and dynamic is important, such as news pages, department updates, or event highlights.
Component Do’s & Don’ts
There might be a time when you don’t know whether to use a Post Cards component or not. Here are some examples of how to effectively use a Post Cards component and when you shouldn’t use one:
DO
Use concise headlines and summaries to make your content easy to scan, and always include clear links to full articles so visitors can quickly explore more. Keep the layout consistent with your site’s overall design to maintain a clean, professional appearance. Regularly update the block to ensure the content stays relevant and engaging for your audience.
DON’T
Avoid long or overly complex titles, keep them clear and to the point. Don’t overlook visual hierarchy; headlines should stand out, and links should be easy to find and recognize. Avoid leaving the block outdated, as stale content can reduce visitor engagement. Do not copy and repost content from other sites. Duplicated content can negatively affect analytics, create redundant search results, and confuse users. All content should be original and maintained as a single source of truth on your site.
Component Design Options
Below are the Posts Card component design options, with explanations of each and guidance on proper usage.
EDITABLE PARTS:
- Block Heading:
- Show Block Heading: Option to turn off or on the header.
- Eyebrow Text (optional): An eyebrow text is a small line of text that appears above the title. Its purpose is to provide context, category information, or a subtle introduction to the main heading without drawing as much attention as the headline itself.
- Title (optional): A header title should clearly convey the blocks main topic, be visually prominent, and guide visitors through the content while maintaining readability and accessibility.
- Description (optional): The description provides a brief, clear summary that supports the header title and helps visitors quickly understand the block content.
- Button (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
- Button Color: Green, Gold
- Block Options:
- Layout: 3-Up Grid, 2-Up Gid, Highlight, Grid List. How many cards appear per row based on the desired visual balance and available page space.
- Background Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the card color)
- Card Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the background color)
- Filter Posts: When enabled, this option allows administrators to display posts filtered by category, tag, or author, making it easy to tailor content to a specific audience or purpose.
- Filter by Category: Organize posts by categories. Selecting a specific category will display only the posts associated with that group.
- Filter by Tag: Organize posts using tags. Selecting a specific tag will display only the posts associated with that tag.
The example below shows the Posts Cards in use, along with the selected configuration options.
- Block Heading:
- Show Block Heading: Yes
- Title (optional): Header Title
- Description (optional): Lorem ipsum dolor sit amet consectetur adipisicing elit…
- Button Color: Green
- Block Options:
- Layout: 3-Up Grid
- Background Color: White
- Card Color: Black
Header Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, earum praesentium repudiandae ullam quae optio quos quis reprehenderit maxime iusto eos explicabo accusamus aspernatur molestiae quod. Consequuntur, consequatur. Sed, molestiae!