Newsroom

Other names: News landing page

Newsroom is the news landing page for your website. This pattern includes:

Featured news section
List of latest news
Link to all news items
News related side navigation

We provide two patterns with different featured news options.

Featured images: 3 featured item with small images
Featured hero image: 1 featured item with a larger image

Landing page with feature images

You can also omit images if you do not have them.

Example for landing page with feature images
Source code for landing page with feature images

Example

Live example in new tab

Source code

Featured news



  
    
      
    
    
      
        
          California state department announces plans for upcoming important
          initiative
        
      
      Month 00, 0000 | Press release
    
  
  
  
    
      
    
    
      
        
          Experts Provide Insights on Climate Remediation
        
      
      Month 00, 0000 | Press release
    
  
  
  
    
      
    
    
      
        
          Individuals Reflect on CalFresh Awareness Month
        
      
      Month 00, 0000 | Press release

News cards



  
    
      
        
          Subscribe for updates
        
      
      
        Keep up-to-date on our latest updates. Sign up for email notifcations.
      
    
  

  
    
      
        
          Blog post title
        
      
      Month 00, 0000
      
        Short 1 - 2 sentence description promoting this blog post.

News list

<!-- News list  -->
<h2 class="h3">Latest news</h2>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Local Entity Implements Changes to Operations
  </a>
</h3>
<p>Month 00, 0000 | News</p>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Discussion Continues Regarding California’s Project Funding
  </a>
</h3>
<p>Month 00, 0000 | News</p>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Significant Agreement Reached in San Francisco
  </a>
</h3>
<p>Month 00, 0000 | News</p>
<hr class="m-y-md" />
<!-- End News list  -->

Landing page with feature banner

Example for landing page with feature banner
Source code for landing page with feature banner

Example

Live example in new tab

Source code

<!--Featured news banner-->
<h2>Featured</h2>
<div class="container">
  <div class="row brd-solid-1 brd-gray-200 bg-gray-50-hover">
    <div class="col-lg-8 col-md-6 p-0 text-right d-flex justify-content-center">
      <a
        href="javascript:;"
        class="feature-img"
        style="background: url('/images/sample/images/news-img-featured.png')"
        aria-label="Feature card example image"></a>
    </div>
    <div class="col-md-6 col-lg-4 p-a-md ">
      <h2 class="h4 m-t-0">
        <a href="javascript:;" aria-disabled="true">
          California state department announces plans for upcoming important
          initiative
        </a>
      </h2>
      <p>Month 00, 0000 | Press release</p>
    </div>
  </div>
</div>
<!--End Featured news banner-->

Usage

When and how to use it

We provide a news landing page framework for you to add your department news information. It provides easy access to news items such as:

News releases
Subscription services
Press information
Trending topics

Featured section

Use the featured section at the top of the page to highlight important content (top tasks or needs).

It includes:

1 main featured topic
2 secondary featured topics

Choose an image that is relevant and supports your brand identity, mission, and tone. For best results, use images with this aspect ratio:

For each of the 3 feature images: 275px x 160px
For feature banner : Container maximum width 1176px

How not to use it

Do not use this to publish extensive content. The purpose of this page is to get people to the content they want.

Components and patterns used

Card
Feature banner
Side navigation
Horizontal separator
News list (partial)

Accessibility

Standard accessibility review

Each time a new component version is published:

Test with the axe accessibility tool
Review with the VoiceOver or NVDA screen reader
Ensure all actionable elements are accessible by keyboard command and tab in a logical order
Check the component layout on a variety of screen sizes