VPBanner

Banner component, can be use to display banner.

Demo

Mr.Hope

Where there is light, there is hope

Visit nowRepo

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",
    },
  ]'
/>

Options

titleRequiredstring

Banner title.

contentstring

Banner content.

logostring

Banner logo.

actionsBannerAction[]

Banner actions.

actions[*].textRequiredstring

Text of the action.

actions[*].linkRequiredstring

Link of the action.

actions[*].type"primary" | "default"

Default"primary"

Type of the action.

backgroundstring

Banner background.

colorstring

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).