Enhance Layout Elements

A collection of custom elements for implementing layout patterns.

⚠️ Currently under active development and not recommended for use in production.

Usage

1. Install the package:

   npm i @enhance/layout-elements

2. Expose the element you'd like to use:

   // app/elements/layout-collection.mjs
   import { collection } from '@enhance/layout-elements'
   export default collection

3. Use the element in your app:

   // app/pages/index.html
   <layout-collection>
     <img src='…' alt='…' />
     <img src='…' alt='…' />
     <img src='…' alt='…' />
   </layout-collection>

Individual element descriptions and links to their docs follow below.

Elements

Collection

A single file component for creating a horizontally scrollable collection of items, with optional scroll snapping.

Read the docs

Sidebar

A single file component for creating an adaptive sidebar layout.

Read the docs