Home›Docs›List›Bullet Section

Bullet Section

Last updated: 14 days ago

Category: List

Bullet is commonly referred to as an unordered list or brief news, primarily consisting of short text and usually without accompanying images; bullet can also consist of one or more lines of text but ...

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

Introduction

We define simple information blocks as bullet, which display as much text information as possible. The basic structure is _bullet -> _bullet-body [ -> label]. The main purpose of _bullet-body is to create space around the label. Additional information can be marked with the rep attribute, with the following available values:

rep=label: Indicates a title (text that exceeds the line will be truncated)
rep=arrow: Indicates a directional arrow
rep=disk: Indicates a circular image
rep=cube: Indicates a square image
rep=rank: Indicates a ranking
rep=check: Indicates a static checkmark icon
rep=tips: Indicates a trailing tip

Basic Usage

Apply _bullet to a tag to create a single-line bullet information display.

Output
HTML

Over 4 Million Americans Roll Up Sleeves For Omicron-Targeted COVID Boosters American Airlines Flyer Charged, Banned For Life After Punching Flight Attendant On Video
23 Of The Funniest Tweets About Cats And Dogs This Week (Sept. 17-23)

Woman Who Called Cops On Black Bird-Watcher Loses Lawsuit Against Ex-Employer
```
                
                
            
```

Separated Content

Add the _bullet-body tag to isolate the main content. Within _bullet-body, add a tag with rep="label" to explicitly define a title. Using this attribute creates space around the title.

Output
HTML

[before body] [before label]One Dead After Plane Crashes At Reno Air Race[after label] [after body]
[before body]
[before label]One Dead After Plane Crashes At Reno Air Race[after label]
[after body]
```
                
                
            
```

Title Only

For bullets containing only a title, the title can be wrapped with rep="label" or not. The entire _bullet can be an <a> link, or just the rep="label" portion can be the link.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
```
                
                
            
```

Using Icons

For briefs with only a title that need icons, you can insert an i tag with the rep=icon attribute.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
```
                
                
            
```

Using Circular Images

For briefs with only a title that need circular avatars or other images, you can insert an img tag with the rep=disk attribute.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
```
                
                
            
```

Using Square Images

For briefs with only a title that need square avatars or other images, you can insert an img tag with the rep=cube attribute.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
```
                
                
            
```

Suffix Text

_bullet uses a left-right layout - icons, images and titles are displayed on the left, while tips can be displayed on the right. Tips text appears in gray to provide auxiliary information about the item's status.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Clicks 85 Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap Clicks 275

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89
Clicks 34

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
Clicks 125
```
                
                
            
```

Indicator Arrow

To add a directional arrow to an item, add an i tag with rep=arrow attribute.

Output
HTML

One Dead After Plane Crashes At Reno Air Race Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89
More

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
More
```
                
                
            
```

No Padding

By default, _bullet retains padding on both sides. If you need to remove the padding on both sides, you can add the unpadded attribute.

Output
HTML

One Dead After Plane Crashes At Reno Air Race
Family Of American Held In Afghanistan Says He Was Freed By Taliban In Prisoner Swap

Maury Wills, Base-Stealing Shortstop For Dodgers, Dies At 89

Fiona Threatens To Become Category 4 Storm Headed To Bermuda
```
                
                
            
```

List Formatting

By default, a bullet is an independent element that can be combined into any section. To format multiple bullets as a list, you can use other tags or style classes like hr, oc-line, _bd[-*], _p[-*], _m[-*], _r[-*], _sd[-*], and _bg[-*].