VPBanner

Less than 1 minute

Banner component, can be use to display banner.

Demo

Basic Banner

<VPBanner
  title="Mr.Hope"
  content="Where there is light, there is hope"
  logo="https://mister-hope.com/logo.svg"
  :actions='[
    {
      text: "Visit now",
      link:"https://mister-hope.com",
    },
    {
      text: "Repo",
      link: "https://github/Mister-Hope/Mister-Hope.github.io",
      type: "default",
    },
  ]'
/>

Props

title

Type: string
Required: Yes

Banner title

content

Type: string
Default: ''

Banner content

logo

Type: string
Required: No

Banner logo

actions

Type: BannerAction[]

interface BannerAction {
  text: string;
  link: string;
  /**
   * @default "primary"
   */
  type?: "primary" | "default";
}

Required: No

Banner actions

background

Type: string
Required: No

Banner background

color

Type: string
Required: No

Banner font color

Tips

To make background and font color adapt to dark mode automatically, you can pass css variable, such as: var(--my-bg).