Cover (<e-cover>)

The e-cover component creates a layout using Grid where the main content (placed in the default slot) is vertically centered between optional header (slot="header") and footer (slot="footer") content. It’s often used for hero sections or full-page covers. It ensures a minimum height and applies consistent spacing using gap.

Basic Usage

<e-cover min-height="70vh">
  <header slot="header">Top Content (Header)</header>
  <h1>Main Centered Content</h1>
  <footer slot="footer">Bottom Content (Footer)</footer>
</e-cover>

Example

Default Cover: (min-height=100vh)

Header Element

This is the Main Content

It is vertically centered.

Footer Element

No Padding (Header + Main): min-height="10em" no-padding

Header Element

This is the Main Content

It is vertically centered.

No Padding (Main Only): min-height="10em" no-padding

This is the Main Content

It is vertically centered.

No Padding and No Space: min-height="4em" space="0" no-padding

Header (No Padding on Cover)
Main Centered
Footer

Properties

  • min-height <string> (Default: '100vh')
    • The minimum height (min-block-size) of the cover element. Maps to --cover-min-height. Attribute: min-height.
  • space <string> (Default: '1rem')
    • The space (gap) between header, main, and footer. Also used as default padding. Maps to --cover-space. Attribute: space.
  • no-padding <boolean> (Default: false)
    • If true, removes padding from the cover element. Attribute: no-padding.

Slots

  • header: Optional slot for content placed at the top.
  • Default Slot: Used for the main content that will be vertically centered.
  • footer: Optional slot for content placed at the bottom.