List of articles

Other names: News list, report list

This is a list of articles that are published regularly.

Common list topics includes:

News releases
News articles
Blog posts
Publications
Reports

Here is a breakdown of this pattern:

Page title: Meaningful and concise. E.g.: News releases
Time period (level 2 heading): This can be by year, month and year, quarter.
Item: The item is listed in 3 parts
- Title: Concise title that links to the item
- Publication date
- Category (optional)
Pagination: Optional. Use as needed.

Example

Live example in new tab

Source code

Featured news

<!-- Press release list Extended -->
<h2>Month 0000</h2>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    California state department announces plans for upcoming important
    initiative
  </a>
</h3>
<p>Month 00, 0000 | Press release</p>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Experts Provide Insights on Climate Remediation
  </a>
</h3>
<p>Month 00, 0000 | Press release</p>

<h2>Month 0000</h2>
<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Individuals Reflect on CalFresh Awareness Month
  </a>
</h3>
<p>Month 00, 0000 | Press release</p>

<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 | Press release</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 | Press release</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 | Press release</p>

<hr class="m-y-md" />
<h3 class="lead font-weight-700">
  <a href="javascript:;" aria-disabled="true">
    Official Report Sheds Light on the last Flu Season
  </a>
</h3>
<p>Month 00, 0000 | Press release</p>
<!-- End Press release list extended -->

Usage

When and how to use it

Use this pattern for related items. For instance, a News page could include news releases, news articles, and blog posts. This page would not include content that is not news related (data reports, legislative analyses).

Tip: You may want to discuss and document retention internally for these items to keep your website lean. For instance, only keep the last 3 years of new releases.

This pattern is related to the Newsroom pattern and the Article pattern . You can use all three patterns to have a cohesive news strategy for your website.

How not to use it

Do not mix unrelated items.

If possible, avoid PDFs to increase the usability and accessibility of your website. Instead, use HTML pages.

Components used

Horizontal separator
Pagination

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