Article

Other names: News article, press release

The Article template provides a clear and user-friendly layout for a news article. Each article contains:

Category
Publication date
Article title or headline
Sub-headline (optional)
Author (optional)
Social media share icons
Article body
Press contact (optional)

These items give a hierarchy of the content, which increases usability.

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 page pattern for content that captures information at a point in time. This includes news articles, press releases, or blog posts. You can also use this as part of a digital publication.

Use other components on this page, as needed.

Tip: Make sure that important content does not only appear in news articles. Articles age immediately after publication. Publish the content somewhere better on your website.

How not to use it

Avoid using this template for content that is not a press release, an article, or similar content.

Typography and components used

Lead text
Horizontal separator
Icons

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