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: GitHub-inspired docs with sharper contrast, balanced spacing, and a polished feel on every screen.
  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: |
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="12" rx="2" /><path d="M8 20h8" /><path d="M12 16v4" /></svg>
    title: Responsive Design
    details: Deliver a crisp, reliable reading experience with layouts that stay balanced from phones to ultra-wide displays.
    linkText: Learn more
    link: https://github.com/brenoepics/vitepress-carbon
  - icon: |
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 9V5a2 2 0 0 0-2-2h-4" /><path d="M8 3H6a2 2 0 0 0-2 2v4" /><path d="M4 15v4a2 2 0 0 0 2 2h4" /><path d="M20 9V5a2 2 0 0 0-2-2h-2" /><path d="M14 21h4a2 2 0 0 0 2-2v-4" /><path d="M9 12a3 3 0 1 1 6 0a3 3 0 1 1-6 0Z" /></svg>
    title: Seamless Integration
    details: Drop the theme into existing VitePress projects without losing the familiar GitHub-like cadence and structure.
    linkText: Learn more
    link: https://github.com/brenoepics/vitepress-carbon
  - icon: |
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 21v-7" /><path d="M4 10V3" /><path d="M12 21v-9" /><path d="M12 8V3" /><path d="M20 21v-5" /><path d="M20 12V3" /><path d="M2 10h4" /><path d="M10 8h4" /><path d="M18 12h4" /></svg>
    title: Customizable Theming
    details: Fine-tune surfaces, accents, and typography while keeping the interface cohesive, modern, and highly legible.
    linkText: Learn more
    link: https://github.com/brenoepics/vitepress-carbon
---

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.