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-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-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-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" 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-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-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-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-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" 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-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-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-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2026-09-20T01:55:03" datetime="2026-09-20T01:55:03" data-component="date">2026-09-20</time></span> <!-- typography.blade.php   original: span -->
     <span class="c-typography c-newsitem__read-time c-typography__variant--span" 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-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-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-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" 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-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-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-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" 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-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-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-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-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" 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-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-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-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" 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-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-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-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-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" 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-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-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-component="typography"><!-- icon.blade.php -->
     <time class="c-date" data-date="2024-06-01T00:00:00" datetime="2024-06-01T00:00:00" 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-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-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-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-component="element">
    <!-- image.blade.php -->
    <figure class="c-image c-newsitem__image c-image--cover c-image--is-placeholder c-image--is-placeholder" 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	Type	Description
heading	null	?string	-
subHeading	null	?string	-
content	null	?string	-
image	null	?array	-
date	null	?array	-
readTime	null	?string	-
standing	false	boolean	-
link	null	?string	-
headerRightArea	null	mixed	-
headerLeftArea	null	mixed	-
titleLeftArea	null	mixed	-
titleRightArea	null	mixed	-
contentLeftArea	null	mixed	-
contentRightArea	null	mixed	-
hasPlaceholderImage	null	?boolean	-

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