CSS Poster

Last updated: 16 days ago

Category: Basic

The poster component defines a cover image for post lists and card lists. It is purely styled with CSS.

CSS Legend16 days agoCSS Poster16 days ago

Basic Usage

The poster component is created by inserting an img tag inside an element with the rep="poster" attribute. By default it has no dimensions and needs custom sizing.

Output
HTML

```
                
                
            
```

Aspect Ratio

The built-in variable --_poster-ar defines the poster's aspect ratio (default 4/3). Can be set to other ratios like 16/9.

Output
HTML

```
                
                
            
```

Full Width

Posters default to inline-flex display. To span full width, set variable --_poster-d:flex.

Output
HTML

- Title
- Title
- Title
- Title
```
                
                
            
```

Empty Image

When the img tag's src attribute is empty, the image will be hidden and a placeholder icon displayed.

Output
HTML

```
                
                
            
```

Built-in Elements

Posters can contain common small elements like:

oc-badge
oc-buoy
oc-flag components.

Output
HTML

- Title
- Title
- Title
- Title
```
                
                
            
```

Page / Font Scaling

16 days ago

CSS Legend