News Item
The News Item component provides a reusable pattern for newsitem in the interface.
Newsitem
A plain newsitem component.
Standing
The standing variant of the newsitem component.
Stack
The stack variant of the newsitem component.
API
| Parameter | Default | Description |
|---|---|---|
|
heading
|
Title of the item. | |
|
subHeading
|
Subheading of the item. | |
|
content
|
Content of the item. | |
|
image
|
Image of the item, check @image for documentation. | |
|
date
|
Date of the item. Check @date for documentation. | |
|
readTime
|
Read time of the item. | |
|
standing
|
false | If the item will be appearing standing or laying down. |
|
link
|
Link to the item. | |
|
hasPlaceholderImage
|
If the item has a placeholder image. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-newsitem--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-newsitem--border-width
|
var(--border-width) | range | - | Size |
|
--c-newsitem--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-newsitem--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-newsitem--font-size-400
|
var(--font-size-400) | range | - | Three steps above base in the type scale. Equivalent to h4. |