---
layout: collection
override:tags: []
date: 2022-12-21
title: Sample Collection Template
pathName: learn-core-web-vitals
cards:
  - url: /new-patterns-july-2022/
    eyebrow:
      icon: featured
      text: Featured
    cardLayout: 'vertical'
  - title: 'The CSS Podcast: Media query range syntax'
    description: Praesent accumsan eros orci quis congue metus porta a sed dapibus magna.
    thumbnail: image/SZHNhsfjU9RbCestTGZU6N7JEWs1/VwL892KEz6bakZMlq10D.png
    eyebrow:
      icon: podcast
      text: Podcast
    cardLayout: 'horizontal'
    theme: 'tertiary'
    column: '2'
    url: /https://pod.link/thecsspodcast/
  - title: Meet the Chrome team
    description: We're meeting you where you are. Join us at upcoming web conferences in your region or catch up on past events.
    eyebrow:
      icon: event
      text: Event
    url: /meet-the-team
  - url: /terra-dark-mode/
    eyebrow:
      icon: blog
      text: Blog
    cardLayout: 'vertical'
    column: '3'
    row: '2'
  - title: Aspect ratio image card
    description: With the aspect-ratioproperty, as you resize the card, the green visual block maintains this 16 x 9 aspect ratio.
    eyebrow:
      icon: pattern
      text: Pattern
    theme: 'quaternary'
    url: /patterns/layout/aspect-ratio-image-card/
  - title: Take our CSS course
    description: Let’s gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
    eyebrow:
      icon: mortarboard
      text: Learn
    url: /explore
  - url: /building-chrometober/
    eyebrow:
      icon: blog
      text: Case study
    cardLayout: 'horizontal'
    column: '1'
  - title: Lorem ipsum dolor sit amet
    description: Mauris eu consequat ligula, eget facilisis erat. Fusce volutpat felis magna, sodales pharetra ante maximus vel.
    eyebrow:
      icon: news
      text: What's new
---
