Skip to main

Design System

  • Welcome
  • Colors
  • Typography
  • Spacing

CSS

  • Utilities
  • Compositions

Component Library

  • Aside
  • Audio Player
  • Authors
  • Banners
  • Block quotes
  • Brand
  • Breadcrumbs
  • Browser compatibility table
  • Button
  • Callout
  • Cards
  • Carousel
  • Code blocks
  • Compare
  • Counter
  • Details
  • Eyebrow
  • Floating Action Button
  • Feature Card
  • Figure
  • Fixed width Image
  • Form Fields
  • Headline
  • Hero
  • Hero Image
  • Icon Button
  • Indicator
  • Labels
  • Lists
  • Numbered headers
  • Page Header
  • Pagination
  • Pill
  • Preview Pagination
  • Prose
  • Stack Nav
  • Stats
  • Status List
  • Tables
  • Tabs
  • Generated table of contents
  • Toggle Switch
  • Tooltips

Headline - Component

With Action
View full screen
Code

Source (Nunjucks)

<div class="headline all-center flow">
<h2 class="headline__title">{{ data.title }}</h2>
<p>{{ data.summary }}</p>
{% if data.action %}
<div class="headline__action">
<a href="{{ data.action.url }}">{{ data.action.text }}</a>
</div>
{% endif %}
</div>

Output

<div class="headline all-center flow">
<h2 class="headline__title">
Tempus natoque facilisi habitant ante elementum platea sed
</h2>
<p>
Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad
libero mattis mi risus tempor integer sapien velit fames
</p>
</div>

Information

A simple pattern for create a centered, heading, summary and action group.

Key links

  • Sass File

Variants

With Action

View full screen
Code

Source (Nunjucks)

<div class="headline all-center flow">
<h2 class="headline__title">{{ data.title }}</h2>
<p>{{ data.summary }}</p>
{% if data.action %}
<div class="headline__action">
<a href="{{ data.action.url }}">{{ data.action.text }}</a>
</div>
{% endif %}
</div>

Output

<div class="headline all-center flow">
<h2 class="headline__title">
Tempus natoque facilisi habitant ante elementum platea sed
</h2>
<p>
Habitant sodales hendrerit nisl dui conubia est hac nostra interdum ad
libero mattis mi risus tempor integer sapien velit fames
</p>
<div class="headline__action">
<a href="#">See all</a>
</div>
</div>

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.