Home›Docs›List›Card Section

Card Section

Last updated: 11 days ago

Category: List

The card is used to display mixed content of images and text, in pure CSS form, and can be used with any layout, such as flex or grid.

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

Basic Structure

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

                      
                        <div class="_card">
                            <a rep="poster">
                                <img/>
                            </a>
                            <div class="_card-body">
                                <div rep="title"></div>
                            </div>
                            <div class="_card-foot"></div>
                        <div>

Single Image with Text

Card lists are typically implemented using grid layout.

rep=poster indicates the cover image container
rep=title indicates the title container
Both rep=poster node and _card-foot node can be omitted

Output
HTML

```
                
                
            
```

Multiple Text with Image

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

- 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
- Cleaner Was Dead In Belk Bathroom For 4 Days Before Body Found: Police
  
  The 63-year-old woman was seen working at the South Carolina store on Thursday. She was found dead Monday after her family reported her missing, authorities said.
  
  Keywords: BathroomTVIslands
- '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
  
  Keywords: BathroomTVIslands
- Fiona Barrels Toward Turks And Caicos Islands As Category 3 Hurricane
  
  The Turks and Caicos Islands government imposed a curfew as the intensifying storm kept dropping copious rain over the Dominican Republic and Puerto Rico.
  
  Keywords: BathroomTVIslands
```
                
                
            
```

The footer node only contains margin-top properties. If users need to customize footer content, they can place any elements inside _card-foot.

Output
HTML

- Cleaner Was Dead In Belk Bathroom For 4 Days Before Body Found: Police
  
  The 63-year-old woman was seen working at the South Carolina store on Thursday. She was found dead Monday after her family reported her missing, authorities said.
  
  Keywords: BathroomTVIslands
  
  I love traveling.
- '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
  
  Keywords: BathroomTVIslands
  
  Total spent: 500 USD
  Confirm
```
                
                
            
```

Using Tags

Since the cover image occupies a large area, you can place tags such as oc-flag, oc-badge and oc-bouy.

Output
HTML

- NEW
  
  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
  
  Cleaner Was Dead In Belk Bathroom For 4 Days Before Body Found: Police
  
  The 63-year-old woman was seen working at the South Carolina store on Thursday. She was found dead Monday after her family reported her missing, authorities said.
  
  Keywords: BathroomTVIslands
- BBC
  
  '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
  
  Keywords: BathroomTVIslands
- 356
  
  Fiona Barrels Toward Turks And Caicos Islands As Category 3 Hurricane
  
  The Turks and Caicos Islands government imposed a curfew as the intensifying storm kept dropping copious rain over the Dominican Republic and Puerto Rico.
  
  Keywords: BathroomTVIslands
```
                
                
            
```

Using Buttons

Users can customize footer content or use built-in button group tags.

rep=btns indicates button groups, wrapped by _card-foot node, aligned to the bottom of the card

Without Paddings

The list has padding and borders by default. We can remove borders to better integrate with other components.

Custom Image Ratio

The core of card is the large image. We can control the image ratio through CSS variable --_card-ar (ar=aspect-ratio). Default ratio is 16:9.

Multiple Images

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

Bullet Section: Detailed Usage and Examples

14 days ago

CSS Post

11 days ago