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'
}) }}
#100CoolWebMoments
Take a stroll down memory lane and celebrate #100CoolwebMoments since Chrome’s first release — lorem ipsum.
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
})
}}
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.
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')
}}
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.
#100CoolWebMoments
Take a stroll down memory lane and celebrate #100CoolwebMoments since Chrome’s first release — lorem ipsum.