Add a landing page

# Create a Featured Card

Feature Card contains content and actions that relate information about a single topic. You can use HTML entities (—) or basic Markdown styling (*emphasis*) inside these string arguments.

The featuredCard component requires these fields:

• title — the title of the card.
• description — the description of the card.
• imgSrc — the image displays on the card. Follow the add media guide to upload your image to our CDN. Once you've uploaded the image, copy the path out of the shortcode snippet, paste that into this field.
• imgAlt — the description of the image. You can read more about writing effective alt text over on the web.dev handbook.
• actionUrl— an url of the CTA at the bottom of the card.
• actionText— a text of the CTA at the bottom of the card.

To add an Featured Card to the page, you can use the {{ featuredCard }} shortcode.

{% from 'macros/cards/featured-card.njk' import featuredCard with context %}

{{ featuredCard({
  title: '#100CoolWebMoments',
  description: 'Take a stroll down memory lane and celebrate **#100CoolwebMoments** since Chrome’s first release — _lorem ipsum._',
  imgSrc: 'image/kheDArv5csY6rvQUJDbWRscckLr1/AlyVvShYHBM5I7ikG8vj.jpg',
  imgAlt: '#100CoolWebMoments',
  actionUrl: '/blog/insider-april-2022/',
  actionText: 'Discover the timeline'
}) }}

Featured

#100CoolWebMoments

Take a stroll down memory lane and celebrate #100CoolwebMoments since Chrome’s first release — lorem ipsum.

Discover the timeline

# Featured Blog Card

Featured Blog Card is a card component that displays your post. It includes post title, content, thumbnail, and authors detail.

The featuredPostCard component requires these fields:

• post — a relative url path to a single blog post page.
• options
  • icon - the filename for the icon, minus the .svg extension.
  • actionUrl— an url of the CTA at the bottom of the card.
  • actionText— a text of the CTA at the bottom of the card.

To add an Featured Blog Card to the page, you can use the {{ featuredPostCard }} shortcode.

{% from 'macros/cards/featured-post-card.njk' import featuredPostCard with context %}

{% set url = '/blog/devtools-tips-2/' %}
{% set post = helpers.findByUrl(collections.all, url, locale) %}

{{ featuredPostCard(
  post, {
    icon: 'star',
    actionText: 'Discover',
    actionUrl: url
  })
}}

Featured

Introducing Chrome Dev Insider

A new series by Chrome’s Web Platform team where we take developers behind the scenes to share perspectives, conversations and updates.

Ben Galbraith

April 13, 2022

Discover

# Featured Cards Section

A featured section is a layout of cards on the same plane. The code below is the example of the component usages to display two featured cards, which are a Featured Blog Card and Featured Card.

{% from 'macros/featured-section.njk' import featuredSection with context %}

{{ featuredSection(
  cards: [
    { postUrl: '/blog/insider-april-2022/',
      actionUrl: '/blog/insider-april-2022/',
      actionText: 'Discover'
    },
    { customPost: {
        title: '#100CoolWebMoments',
        description: 'Take a stroll down memory lane and celebrate **#100CoolwebMoments** since Chrome’s first release — _lorem ipsum._',
        imgSrc: 'image/kheDArv5csY6rvQUJDbWRscckLr1/AlyVvShYHBM5I7ikG8vj.jpg',
        imgAlt: '#100CoolWebMoments',
      },
      actionUrl: '/blog/insider-april-2022/',
      actionText: 'Discover the timeline'
    },
  ], utilities: 'grid-cols-1 lg:grid-cols-2')
}}

Featured

Introducing Chrome Dev Insider

A new series by Chrome’s Web Platform team where we take developers behind the scenes to share perspectives, conversations and updates.

Ben Galbraith

April 13, 2022

Discover

Featured

#100CoolWebMoments

Take a stroll down memory lane and celebrate #100CoolwebMoments since Chrome’s first release — lorem ipsum.

Discover the timeline