News Item

The News Item component provides a reusable pattern for newsitem in the interface.

Newsitem

A plain newsitem component.

Post title

This is a short excerpt of the news item for demonstration purposes.

<a class="c-newsitem" href="https://example.com/fake-news-item" data-uid="6a44f1afea957" data-component="newsitem">
<div class="c-newsitem__header">
  <div class="c-newsitem__header-left">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography u-margin__y--0 u-padding__right--1 c-typography__variant--bold" data-uid="6a44f1afea296" data-component="typography">A site name</span>
  </div>
  <div class="c-newsitem__header-right">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__date c-typography__variant--span" data-uid="6a44f1afebba2" data-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" data-uid="6a44f1afebb45" data-component="date">2024-06-01</time></span> 
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" data-uid="6a44f1afebf6d" data-component="typography"><!-- icon.blade.php -->
     5 minutes</span>
  </div>
</div>
<div class="c-newsitem__title">
  <div class="c-newsitem__title-left cover">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-newsitem__heading c-typography__variant--h3" data-uid="6a44f1afec59b" data-component="typography">
      Post title
    </h2>
  </div>
</div>
<div class="c-newsitem__main-left">
  <!-- typography.blade.php   original: p -->
  <p class="c-typography c-newsitem__content c-typography__variant--p" data-uid="6a44f1afecb91" data-component="typography">
    This is a short excerpt of the news item for demonstration purposes.
  </p>
</div>
<div class="c-newsitem__main-right">
  <div class="c-element c-newsitem__image-container" data-uid="6a44f1afed0a6" data-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a44f1afecf9c" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure>
  </div>
</div></a>

@newsItem([
    'heading'             => "Post title",
    'content'             => "This is a short excerpt of the news item for demonstration purposes.",
    'image'               => null,
    'date'                => true ? [
        'timestamp' => strtotime('2024-06-01'),
        'format'    => 'Y-m-d',
    ] : null,
    'readTime'            => '5 minutes',
    'link'                => 'https://example.com/fake-news-item',
    'context'             => ['module.posts.news-item'],
    'hasPlaceholderImage' => true,
    'classList' => [],
    'standing' => false,
    'attributeList' => [],
])
    @slot('headerLeftArea')
        
            @typography([
                'element' => 'span',
                'variant' => 'bold',
                'classList' => ['u-margin__y--0', 'u-padding__right--1'],
            ])
                A site name
            @endtypography

            @tags([
                'compress' => 4, 
                'tags' => [], 
                'format' => false,
            ])
            @endtags

    @endslot

    @slot('headerRightArea')
       
    @endslot
@endnewsItem

Standing

The standing variant of the newsitem component.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a short excerpt of the news item for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien augue. Donec vel sapien augue.

<a class="c-newsitem c-newsitem--standing" href="https://example.com/fake-news-item" data-uid="6a44f1afed5a2" data-component="newsitem">
<div class="c-newsitem__header">
  <div class="c-newsitem__header-left">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography u-margin__y--0 u-padding__right--1 c-typography__variant--bold" data-uid="6a44f1afed4e5" data-component="typography">A site name</span>
  </div>
  <div class="c-newsitem__header-right">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__date c-typography__variant--span" data-uid="6a44f1afed768" data-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2026-07-01T10:53:35" datetime="2026-07-01T10:53:35" data-uid="6a44f1afed71a" data-component="date">2026-07-01</time></span> 
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" data-uid="6a44f1afed870" data-component="typography"><!-- icon.blade.php -->
     5 minutes</span>
  </div>
</div>
<div class="c-newsitem__title">
  <div class="c-newsitem__title-left cover">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-newsitem__heading c-typography__variant--h3" data-uid="6a44f1afed93f" data-component="typography">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
  </div>
</div>
<div class="c-newsitem__main-left">
  <!-- typography.blade.php   original: p -->
  <p class="c-typography c-newsitem__content c-typography__variant--p" data-uid="6a44f1afeda07" data-component="typography">
    This is a short excerpt of the news item for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien augue. Donec vel sapien augue.
  </p>
</div>
<div class="c-newsitem__main-right">
  <div class="c-element c-newsitem__image-container" data-uid="6a44f1afedb99" data-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a44f1afedac0" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure>
  </div>
</div></a>

@newsItem([
    'heading'             => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    'content'             => "This is a short excerpt of the news item for demonstration purposes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sapien augue. Donec vel sapien augue.",
    'image'               => null,
    'date'                => true ? [
        'timestamp' => time(),
        'format'    => 'Y-m-d',
    ] : null,
    'readTime'            => '5 minutes',
    'link'                => 'https://example.com/fake-news-item',
    'hasPlaceholderImage' => true,
    'standing' => true
])
    @slot('headerLeftArea')
        
            @typography([
                'element' => 'span',
                'variant' => 'bold',
                'classList' => ['u-margin__y--0', 'u-padding__right--1'],
            ])
                A site name
            @endtypography

            @tags([
                'compress' => 4, 
                'tags' => [], 
                'format' => false,
            ])
            @endtags

    @endslot

    @slot('headerRightArea')
       
    @endslot
@endnewsItem

Stack

The stack variant of the newsitem component.

Stack 1

This is a short excerpt of the news item for demonstration purposes.

Stack 1

This is a short excerpt of the news item for demonstration purposes.

Stack 1

This is a short excerpt of the news item for demonstration purposes.

<a class="c-newsitem" href="https://example.com/fake-news-item" data-uid="6a44f1afee038" data-component="newsitem">
<div class="c-newsitem__header">
  <div class="c-newsitem__header-left">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography u-margin__y--0 u-padding__right--1 c-typography__variant--bold" data-uid="6a44f1afedf8d" data-component="typography">A site name</span>
  </div>
  <div class="c-newsitem__header-right">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__date c-typography__variant--span" data-uid="6a44f1afee20d" data-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" data-uid="6a44f1afee1c0" data-component="date">2024-06-01</time></span> 
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" data-uid="6a44f1afee30d" data-component="typography"><!-- icon.blade.php -->
     5 minutes</span>
  </div>
</div>
<div class="c-newsitem__title">
  <div class="c-newsitem__title-left cover">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-newsitem__heading c-typography__variant--h3" data-uid="6a44f1afee3c9" data-component="typography">
      Stack 1
    </h2>
  </div>
</div>
<div class="c-newsitem__main-left">
  <!-- typography.blade.php   original: p -->
  <p class="c-typography c-newsitem__content c-typography__variant--p" data-uid="6a44f1afee484" data-component="typography">
    This is a short excerpt of the news item for demonstration purposes.
  </p>
</div>
<div class="c-newsitem__main-right">
  <div class="c-element c-newsitem__image-container" data-uid="6a44f1afee5d4" data-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a44f1afee516" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure>
  </div>
</div></a> <a class="c-newsitem" href="https://example.com/fake-news-item" data-uid="6a44f1afee6c3" data-component="newsitem">
<div class="c-newsitem__header">
  <div class="c-newsitem__header-left">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography u-margin__y--0 u-padding__right--1 c-typography__variant--bold" data-uid="6a44f1afee630" data-component="typography">A site name</span>
  </div>
  <div class="c-newsitem__header-right">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__date c-typography__variant--span" data-uid="6a44f1afee854" data-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" data-uid="6a44f1afee80e" data-component="date">2024-06-01</time></span> 
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" data-uid="6a44f1afee930" data-component="typography"><!-- icon.blade.php -->
     5 minutes</span>
  </div>
</div>
<div class="c-newsitem__title">
  <div class="c-newsitem__title-left cover">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-newsitem__heading c-typography__variant--h3" data-uid="6a44f1afeea13" data-component="typography">
      Stack 1
    </h2>
  </div>
</div>
<div class="c-newsitem__main-left">
  <!-- typography.blade.php   original: p -->
  <p class="c-typography c-newsitem__content c-typography__variant--p" data-uid="6a44f1afeeb44" data-component="typography">
    This is a short excerpt of the news item for demonstration purposes.
  </p>
</div>
<div class="c-newsitem__main-right">
  <div class="c-element c-newsitem__image-container" data-uid="6a44f1afeecc8" data-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a44f1afeebf3" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure>
  </div>
</div></a> <a class="c-newsitem" href="https://example.com/fake-news-item" data-uid="6a44f1afeedc3" data-component="newsitem">
<div class="c-newsitem__header">
  <div class="c-newsitem__header-left">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography u-margin__y--0 u-padding__right--1 c-typography__variant--bold" data-uid="6a44f1afeed24" data-component="typography">A site name</span>
  </div>
  <div class="c-newsitem__header-right">
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__date c-typography__variant--span" data-uid="6a44f1afeef93" data-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" data-uid="6a44f1afeef46" data-component="date">2024-06-01</time></span> 
    <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" data-uid="6a44f1afef07b" data-component="typography"><!-- icon.blade.php -->
     5 minutes</span>
  </div>
</div>
<div class="c-newsitem__title">
  <div class="c-newsitem__title-left cover">
    <!-- typography.blade.php   original: h2 -->
    <h2 class="c-typography c-newsitem__heading c-typography__variant--h3" data-uid="6a44f1afef140" data-component="typography">
      Stack 1
    </h2>
  </div>
</div>
<div class="c-newsitem__main-left">
  <!-- typography.blade.php   original: p -->
  <p class="c-typography c-newsitem__content c-typography__variant--p" data-uid="6a44f1afef1f2" data-component="typography">
    This is a short excerpt of the news item for demonstration purposes.
  </p>
</div>
<div class="c-newsitem__main-right">
  <div class="c-element c-newsitem__image-container" data-uid="6a44f1afef346" data-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" data-uid="6a44f1afef287" data-component="image">
      <div class="c-image__placeholder" aria-label="">
        <!-- icon.blade.php -->
      </div>
    </figure>
  </div>
</div></a>

@for($i = 1; $i <= 3; $i++)

    @newsItem([
        'heading'             => "Stack 1",
        'content'             => "This is a short excerpt of the news item for demonstration purposes.",
        'image'               => null,
        'date'                => true ? [
            'timestamp' => strtotime('2024-06-01'),
            'format'    => 'Y-m-d',
        ] : null,
        'readTime'            => '5 minutes',
        'link'                => 'https://example.com/fake-news-item',
        'context'             => ['module.posts.news-item'],
        'hasPlaceholderImage' => true,
        'classList' => [],
        'standing' => false,
        'attributeList' => [],
    ])
        @slot('headerLeftArea')
            
                @typography([
                    'element' => 'span',
                    'variant' => 'bold',
                    'classList' => ['u-margin__y--0', 'u-padding__right--1'],
                ])
                    A site name
                @endtypography

                @tags([
                    'compress' => 4, 
                    'tags' => [], 
                    'format' => false,
                ])
                @endtags

        @endslot

        @slot('headerRightArea')
        
        @endslot
    @endnewsItem
@endfor

API

Parameter	Default	Description
heading	null	Title of the item.
subHeading	null	Subheading of the item.
content	null	Content of the item.
image	null	Image of the item, check @image for documentation.
date	null	Date of the item. Check @date for documentation.
readTime	null	Read time of the item.
standing	false	If the item will be appearing standing or laying down.
link	null	Link to the item.
hasPlaceholderImage	null	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.

Similar components

Signature Sidebar Inline CSS Wrapper