Cards & grids

- background_image: images/demo/dog.jpg
  divider_bottom: curve
  eyebrow: cards · filter-grid · jump-links · team
  heading: Cards & grids
  overlay: primary
  type: page-header

- columns: 3
  eyebrow: cards · icons
  footer: Text under the cards, with a [link](/sections).
  heading: Cards with icons and buttons
  items:
  - buttons:
    - label: Choose
      page: /sections
      style: primary
    icon: bolt
    text: Short card text.
    title: Plan one
  - buttons:
    - label: Choose
      page: /sections
      style: primary
    icon: star
    text: Short card text.
    title: Plan two
  - buttons:
    - label: Choose
      page: /sections
      style: primary
    icon: heart
    text: Short card text.
    title: Plan three
  type: cards

- background: muted
  columns: 3
  eyebrow: cards · photos
  heading: Photo cards that link
  items:
  - image: images/demo/forest-road.jpg
    link:
      page: /sections
    link_label: Explore
    text: Whole card is a link.
    title: Hiking
  - image: images/demo/canoe.jpg
    link:
      page: /sections
    link_label: Explore
    text: Photos zoom on hover.
    title: Paddling
  - image: images/demo/city.jpg
    link:
      page: /sections
    link_label: Explore
    text: Crops to the same shape.
    title: City
  type: cards

- eyebrow: filter-grid
  heading: Filterable grid
  intro: Category buttons filter the cards. Good for portfolios, menus and products.
  items:
  - category: Outdoors
    image: images/demo/snow.jpg
    title: Mountain cabin
  - category: Food
    image: images/demo/coffee.jpg
    title: Harbor café
  - category: City
    image: images/demo/city-2.jpg
    title: Downtown loft
  - category: Food
    image: images/demo/berries.jpg
    title: Berry farm
  - category: Outdoors
    image: images/demo/river.jpg
    title: Riverside
  - category: City
    image: images/demo/street.jpg
    title: Main Street
  type: filter-grid

- background: muted
  heading: 'jump-links: cards that scroll to sections'
  items:
  - anchor: team
    image: images/demo/portrait-2.jpg
    text: Jumps to the team below.
    title: Team
  - anchor: s-0
    image: images/demo/dog.jpg
    text: Back to the page title.
    title: Top
  - anchor: s-1
    image: images/demo/lion.jpg
    text: Back to the first cards.
    title: Cards
  type: jump-links

- columns: 3
  eyebrow: team
  heading: Meet the team
  id: team
  items:
  - bio: Twenty years in the trade.
    email: alex@example.com
    name: Alex Rivera
    photo: images/demo/portrait-1.jpg
    role: Owner
  - bio: Keeps everything running.
    name: Sam Lee
    phone: 555-0100
    photo: images/demo/portrait-2.jpg
    role: Office manager
  - bio: Certified and careful.
    name: Jordan Blake
    photo: images/demo/portrait-3.jpg
    role: Lead technician
  type: team