CSS Post

Last updated: 4 months ago

Category: List

Both post and bullet are sub-components that form image-text lists. A post primarily emphasizes images or image collections, highlighting the role of visuals in information presentation – though it can also display multi-line text without images. For content-rich scenarios or when maximizing information display is desired, use post instead of bullet.

Basic Structure

A post mainly consists of a cover image and main content, with the following basic HTML structure:

                      
                        <div class="_post">
                            <a rep="poster">
                                <img/>
                            </a>
                            <div class="_post-body">
                                <div rep="title"></div>
                                <div rep="brief"></div>
                                <div rep="byline"></div>
                            </div>
                        <div>
                    
                

Simple Usage

The simplest usage includes only title and brief description:

• rep=title indicates the title
• rep=brief indicates the brief description

Image-Text Usage

Wrap cover images with rep=poster attribute tag. Cover images can be placed on either left or right side.

Using Byline

byline indicates source attribution. The rep=byline tag can contain supplementary content beyond title and brief, such as keywords, author, publication time, etc.

Using Tags

Supports two types of small tags:

1. Add small tags like oc-badge, oc-flag, oc-bouy in rep=poster to indicate information characteristics
2. Use head attribute for _post to output head value before the post
3. Use tail attribute for _post to output tail value after the post

Note: The pseudo-elements generated by head and tail attributes are positioned relative to the post. Appropriate spacing should be added before/after the post when using them.

Text Ellipsis

In addition to rep=title, text blocks can also include rep=brief and rep=byline as needed. If the title needs ellipsis handling, use _ell related styles.

For single-line or multi-line text ellipsis usage, click here to view.

Full-width Display on Mobile

When content appears too crowded on mobile, adaptive approaches can be used, such as adding _split to indicate full-width display on mobile.

Multiple Images

Use rep=posters attribute tag to display image galleries. Place the photo wall component _wall inside the tag.