@MESG-COMPONENTS/HEADER

Install

npm install @mesg-components/header or yarn add @mesg-components/header

Properties

• title: String.Required -> title to display on the header
• description: String.Optional -> description to display on the header
• image: String.Optional -> image to render on the right side of the header, if not present, the title and description should take 100% of the width.

Slot

• default to display the description content. Only rendered if description property is not set.

Example

Default:

<template>
  <header title="The title" description="the description" image="https://..." />
</template>

Header with a slot to describe:

<template>
  <header title="The title" image="https://...">
    <p>My description</p>
    <button>xxx</button>
  </header>
</template>

No picture, header in full width:

<template>
  <header title="The title">
    <p>My description</p>
    <button>xxx</button>
  </header>
</template>