Home Page

Tips

The global layout: home component must be used in the md file of the home page plus some other metadata. This is an example of how it works:

---
layout: home

hero:
  name: VitePress Carbon
  text: Streamlined Theme
  tagline: Crafting with carbon's sleekness.
  image:
    src: ./bg.svg
    alt: VitePress Carbon
  actions:
    - theme: brand
      text: Introduction
      link: /guide/introduction
    - theme: alt
      text: View on GitHub
      link: https://github.com/brenoepics/vitepress-carbon
  icon: 
    src: ./logo.svg
    alt: VitePress Carbon

features:
  - icon: 🛠️
    title: Responsive Design
    details: Ensure a consistent experience across devices.
    linkText: Explore
    link: https://github.com/brenoepics/vitepress-carbon
  - icon: 🧩
    title: Seamless Integration
    details: Integrate seamlessly with your VitePress projects.
    link: https://github.com/brenoepics/vitepress-carbon
  - icon: 🎨
    title: Customizable Theming
    details: Tailor the theme to suit your project's needs.

---

Glowing Icon Customization

The background color of the glowing icon can be customized using the glowingIcon prop.

<VPHighlight glowingIcon="#ff0000" />

Prop	Type	Default	Description
glowingIcon	string	var(--vp-c-brand-3)	Sets the background color of the glowing icon effect.