Posts & ProfilePosts Guide

Create social-style posts, micro-blogs, and profile-based content with cards, avatars, tags, and responsive grid layouts.

Live Preview

See how posts look with different configurations:

Posts Grid - Default Layout
Featured Image
JD
Jane Doe
Dec 14, 2025
Just shipped a new feature using ANTSAND Styles v2! The component system makes building UIs incredibly fast.
#featured #css #design
Alex
Alex Chen
Dec 13, 2025
The new profileposts component supports multiple layouts: Grid, Timeline, and Masonry. Each one adapts beautifully to mobile screens.
#published #responsive
MK
Maria Kim
Dec 12, 2025
Working on the dark theme variant. Will push the update soon - looking for feedback on contrast ratios.
#draft #darkmode
Dark Theme Variant
SC
Sam Carter
Dec 14, 2025
Dark mode posts look great on dark backgrounds. Perfect for night-themed dashboards and apps.
#darkmode #ui

Quick Start

Create a posts grid in under 5 minutes:

HTML 
<!-- Posts Grid Container -->
<div class="profileposts-grid data-container">

    <!-- Individual Post Card -->
    <article class="profileposts-card data-sub-container">
        <!-- Optional Image -->
        <div class="profileposts-img-container data-img-container">
            <img class="profileposts-media data-media" src="image.jpg" alt="">
        </div>

        <div class="profileposts-content data-content-wrapper">
            <!-- Author Info -->
            <div class="profileposts-author data-author-container">
                <img class="profileposts-avatar data-author-avatar" src="avatar.jpg">
                <div class="profileposts-author-info data-author-info">
                    <div class="profileposts-author-name data-author-name">Jane Doe</div>
                    <div class="profileposts-date data-date">Dec 14, 2025</div>
                </div>
            </div>

            <!-- Post Content -->
            <div class="profileposts-text data-h3">Your post content here.</div>

            <!-- Tags -->
            <div class="profileposts-tags data-tags-container">
                <span class="profileposts-tag data-tag">#design</span>
            </div>
        </div>
    </article>

</div>

Class Hierarchy

Naming Convention: All posts classes follow the data-* pattern for framework consistency. Component-specific classes use the profileposts-* prefix.
Element Generic Class Component Class Purpose
Grid Container data-container profileposts-grid Grid wrapper for all posts
Post Card data-sub-container profileposts-card Individual post wrapper
Image Container data-img-container profileposts-img-container Aspect ratio wrapper for media
Media/Image data-media profileposts-media Post image with hover effect
Content Wrapper data-content-wrapper profileposts-content Padding wrapper for text
Author Container data-author-container profileposts-author Avatar + info flexbox
Avatar Image data-author-avatar profileposts-avatar Circular profile image
Avatar Placeholder data-avatar-placeholder profileposts-avatar-placeholder Initials fallback (no image)
Author Info data-author-info profileposts-author-info Name + date wrapper
Author Name data-author-name profileposts-author-name Display name text
Date data-date profileposts-date Timestamp display
Post Text data-h3 profileposts-text Main post content
Tags Container data-tags-container profileposts-tags Flexbox wrapper for tags
Tag data-tag profileposts-tag Individual tag badge
CTA Container data-cta-container profileposts-cta-container Action buttons wrapper
CTA Button data-cta profileposts-cta Read more link
New Generic Classes
Header Row data-header - Flex row for header content
Footer Row data-footer - Flex row for footer content
Indicator Dot data-indicator - Red dot marker
Time Display data-time - Timestamp text
Label data-label - Section label text
Badge data-badge - Count/status badge
Card Type Modifiers (on data-sub-container)
Carousel Container data-container profileposts-carousel Horizontal scroll with snap
Note Card data-sub-container profileposts-note Micro-log style (italic quotes)
Article Card data-sub-container profileposts-article Blog-style post card
Visual Log Card data-sub-container profileposts-visual Media post with badge

Layout Variants

Grid Layout (Default)

Responsive grid with auto-fill columns, minimum 320px per card.

<div class="profileposts-grid">...</div>

Fixed Column Grids

Force specific column counts regardless of width.

profileposts-grid-2  
profileposts-grid-3  
profileposts-grid-4

Timeline Layout

Vertical timeline with gradient line indicator.

<div class="profileposts-timeline">...</div>

Masonry Layout

Pinterest-style staggered columns.

<div class="profileposts-masonry">...</div>

Carousel Layout

Horizontal scrolling with snap-to-card behavior.

<div class="profileposts-carousel">...</div>

Note Cards (Micro-Log)

Quick updates with red dot indicator and italic quotes.

<article class="profileposts-note">...</article>

Carousel Layout

Horizontal scrolling carousel with snap-to-card behavior. Perfect for featured content or mixed post types.

Mixed Content Carousel
RECENT POSTS
My Updates
Scroll
My 2025 Roadmap
I'm doubling down on drone test rigs and building a thriving community around first-principles thinking in robotics.
DEC 01, 2025 ESSAY
AS
Anthony Shivakumar
@antshiv_robotics
3 Work 1
Flight Test #42:
Finally got the PID loop stable. Swipe to see the vibration data logs. The new carbon fiber frame holds up beautifully.
2 HOURS AGO VISUAL LOG
Understanding Kalman Filters
A deep dive into the math behind sensor fusion. How to combine accelerometer and gyroscope data for stable flight.
JAN 11, 2021 TECHNICAL
HTML 
<!-- Carousel Container - using data-* hierarchy -->
<div class="data-container profileposts-carousel">

    <!-- Article Card -->
    <article class="data-sub-container profileposts-article">
        <div class="data-h3">My 2025 Roadmap</div>
        <div class="data-p">Article excerpt text...</div>
        <div class="data-footer">
            <span class="data-date">DEC 01, 2025</span>
            <span class="data-tag">ESSAY</span>
        </div>
    </article>

    <!-- Visual Log Card -->
    <article class="data-sub-container profileposts-visual">
        <div class="data-author-container">
            <div class="profileposts-avatar profileposts-avatar-placeholder">AS</div>
            <div class="data-author-info">
                <div class="data-author-name">Anthony Shivakumar</div>
                <div class="data-date">@antshiv</div>
            </div>
        </div>
        <div class="data-img-container">
            <span class="data-badge">3</span>
        </div>
        <div class="data-content-wrapper">
            <div class="data-h3">Title</div>
            <div class="data-p">Post content...</div>
            <div class="data-footer">
                <span class="data-time">2 HOURS AGO</span>
                <span class="data-tag">VISUAL LOG</span>
            </div>
        </div>
    </article>

</div>

Note Cards (Micro-Log)

Quick updates with a minimal, quote-style design. Features a red dot date indicator, italic body, and hashtag/timestamp footer.

Quick Updates - Micro-Log Style
MICRO-LOG
Quick Updates
Scroll
DEC 10, 2025
"Just deployed the new server architecture. Downtime was less than 2 minutes. Success."
#devops 10:42 AM
DEC 08, 2025
"Reading 'The Psychology of Money'. It is surprisingly philosophical. Highly recommend."
#reading 08:15 PM
DEC 05, 2025
"Drone motor failed test #4. The ESC overheated again. Back to the drawing board for the cooling mount."
#drones 02:30 PM
NOV 28, 2025
"Coffee intake is up this week. Deadlines definitely ON."
#life 11:00 AM
HTML 
<!-- Note Card - Using data-* hierarchy -->
<article class="data-sub-container profileposts-note">
    <div class="data-header">
        <span class="data-indicator"></span>
        <span class="data-date">DEC 10, 2025</span>
    </div>
    <div class="data-h3">
        "Just deployed the new server architecture. Success."
    </div>
    <div class="data-footer">
        <span class="data-tag">#devops</span>
        <span class="data-time">10:42 AM</span>
    </div>
</article>

Avatar Placeholder

When a user doesn't have a profile image, show their initials:

Avatar Variants
User
With Image
JD
Placeholder
AC
Custom Color
MK
ANTSAND Orange
HTML 
<!-- With avatar image -->
<img class="profileposts-avatar" src="avatar.jpg" alt="Jane Doe">

<!-- Placeholder with initials -->
<div class="profileposts-avatar profileposts-avatar-placeholder">JD</div>

<!-- Custom color -->
<div class="profileposts-avatar profileposts-avatar-placeholder"
     style="background: linear-gradient(135deg, #f15b2a, #c74a22);">MK</div>

Tag Color Variants

Tag Styles
#default #primary #success #warning #danger
HTML 
<span class="profileposts-tag">#default</span>
<span class="profileposts-tag profileposts-tag-primary">#featured</span>
<span class="profileposts-tag profileposts-tag-success">#published</span>
<span class="profileposts-tag profileposts-tag-warning">#draft</span>
<span class="profileposts-tag profileposts-tag-danger">#urgent</span>

Card Size Variants

Compact vs Large Cards
CP
Compact Post
Dec 14
Smaller padding and avatar for dense layouts.
LP
Large Post
Dec 14, 2025
More padding and larger avatar for featured content.
HTML 
<!-- Compact card -->
<article class="profileposts-card profileposts-card-compact">...</article>

<!-- Large card -->
<article class="profileposts-card profileposts-card-large">...</article>

<!-- Dark theme -->
<article class="profileposts-card profileposts-card-dark">...</article>

Databoard Integration

Data Mapping: ProfilePosts pulls data from the Profile Posts API and maps it to template variables automatically.

Data Structure

JSON 
{
    "profile_posts": [
        {
            "id": 123,
            "post": "Post content with <strong>HTML</strong> support",
            "media": "https://domain.com/uploads/image.jpg",
            "created_at": "2025-12-14 10:30:00",
            "tags": ["design", "css", "tutorial"],
            "profile": {
                "firstname": "Jane",
                "lastname": "Doe",
                "avatar": "https://domain.com/uploads/avatar.jpg",
                "hash": "user123"
            }
        }
    ]
}

Data Mapping Configuration

JSON 
{
    "data_mapping": [
        [["api_data", "body"], ["ProfilePosts", "array"]]
    ]
}

CSS Variables (common_init_modern.volt)

These PHP variables are extracted from CSS config and available in templates:

PHP 
// ProfilePosts component variables
$data_media_class = "";
$data_author_container_class = "";
$data_author_avatar_class = "";
$data_avatar_placeholder_class = "";
$data_author_info_class = "";
$data_author_name_class = "";
$data_date_class = "";
$data_tags_container_class = "";
$data_tag_class = "";

Best Practices

The ANTSAND Way for Posts:
  • Use both class types: Generic (data-*) + component (profileposts-*)
  • Always provide avatar fallback: Use avatar_placeholder when no image
  • Keep tags short: 1-2 words per tag for best appearance
  • Optimize images: Use 16:9 aspect ratio for post media
  • No hardcoded classes: All classes come from CSS config

SASS Import

SCSS 
// In your antsand-v2.scss
@import 'components/profileposts';