ej2-layouts

The layout package contains cards, avatars, splitter, timeline and Dashboard Layout controls.

* The card is a small container in which user can show defined content in specific structure.

* The avatars are icons, initials or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters.

* The splitter is container control which used to construct different layouts using multiple and nested panes.

* The timeline is a tool for displaying chronological information effortlessly within your application. It offers a visually compelling and user-friendly experience for showcasing user activities, tracking progress, or narrating historical timelines.

* The DashboardLayout is a grid structured layout control that helps to create a dashboard with panels. Panels hold the UI components and allow resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.

!Layout

> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase or start a free 30-day trial here.

> A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install Layout controls and its dependent packages, use the following command.

``sh
npm install @syncfusion/ej2-layouts
`

Controls included

Following list of controls are available in the package

* JavaScript Card - Container used to display content in specific structure.
* Getting Started
* View Online Demos

* JavaScript Avatar - Used to add images or initials or icons in different shapes and sizes to your application.
* Getting Started
* View Online Demos

* JavaScript Splitter - Used to construct a different layout using its multiple and nested panes with resizable.
* Getting Started
* View Online Demos

* JavaScript Timeline - Used to build timelines to showcases user activities, tracking progress, narrating historical timelines, and more.
* Getting Started
* View Online Demos

* JavaScript Dashboard Layout - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
* Getting Started
* View Online Demos

Supported Frameworks

These components are available in following list of:

|
     Angular     |
      React       |
         Vue          |
  ASP.NET Core   |
  ASP.NET MVC   |
| :-----: | :-----: | :-----: | :-----: | :-----: |

Use Case samples

* IT Asset Management (Live Demo)
* Swipeable Card (Live Demo)
* Flip Card (Live Demo)
* Tile View (Live Demo)
* Contact Application (Live Demo)
* Avatar Badge (Live Demo)
* Avatar Card (Live Demo)
* SEO Analysis Dashboard (Live Demo)

Key Features

* Card

* Header - Header supports to include title, subtitle along with image.

* Images and Title - Support to include images with customizable caption positions in it.

* Action Buttons - Supports to add buttons within the card either in vertical or horizontal alignment.

* Horizontal Card - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.

* Avatar
* Types - Provided 2 types of avatars such as default and circle.

* Sizes - Supports 7 different sizes to adapt the various application scenario.

* xsmall
* small
* medium (default)
* large
* xlarge

* Splitter

* Multiple Panes - Provided an option to configure more than two panes.

* Resizable Panes - Supports resizable to adjust its pane size dynamically.

* Orientation - The panes can orient either horizontally or vertically.

* Integration - Other JavaScript UI controls can be integrated within panes.

* Nested Panes - Another splitter can be integrated within panes to create a complex layout.

* Timeline

* Orientation - Display items in a horizontal or vertical orientation.

* Opposite content - Display additional information opposite to the item content.

* Items alignment - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.

* Reverse timeline - Shows the timeline items in the reverse order.

* Templates - Customize the default appearance, including styling the dot item, templated content, and more.

* Dashboard Layout

* Drag and Drop - Allows drag and drop of panels at the desired location within the dashboard.

* Floating - Floats the panels upward when the dragging option is enabled.

* Resizing - Support to resize the panels in any direction as per the requirement.

* MediaQuery - Allows the panels to be stacked when the specified resolution is met.

Support

Product support is available for through following mediums.

* Creating incident in Syncfusion Direct-Trac support system or Community forum.
* New GitHub issue.
* Ask your query in Stack Overflow with tag syncfusion and ej2`.

License

Check the license detail here.

Changelog

Check the changelog here

© Copyright 2026 Syncfusion^® Inc. All Rights Reserved. The Syncfusion^® Essential Studio^® license and copyright applies to this distribution.