CSS Post

Last updated: 11 days 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 ca...

CSS Post11 days agoCard Section11 days agoBullet Section: Detailed Usage and Examples14 days agoBullet Section14 days agoCSS Table15 days ago

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

Output
HTML

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.
```
                
                
            
```

Image-Text Usage

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

Output
HTML

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.
```
                
                
            
```

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.

Output
HTML

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.

362 September 22, 2022
```
                
                
            
```

Using Tags

Supports two types of small tags:

Add small tags like oc-badge, oc-flag, oc-bouy in rep=poster to indicate information characteristics
Use head attribute for _post to output head value before the post
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.

Output
HTML

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.

362 September 22, 2022

CNN

How A New Documentary Captures The Complexity Of Being A Child Of Immigrants

In 'Mija,' director Isabel Castro combined music documentaries with the style of 'Euphoria' and 'Clueless' to tell a more nuanced immigration story.

362 September 22, 2022

NEW
```
                
                
            
```

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.

Output
HTML

'Reboot' Is A Clever And Not Too Navel-Gazey Look Inside TV Reboots

Starring Keegan-Michael Key, Judy Greer and Johnny Knoxville, the Hulu show follows the revival of a fictional early 2000s sitcom.","authors":"Marina Fang and Candice Frederick
```
                
                
            
```