TypeScript icon, indicating that this package has built-in type declarations

26.1.35 • Public • Published


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.


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 one at https://www.syncfusion.com/sales/products 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.


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

npm install @syncfusion/ej2-layouts

Controls included

Following list of controls are available in the package

Supported Frameworks

These components are available in following list of:

  1. Angular
  2. React
  3. Vue
  4. ASP.NET Core

Use Case samples

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.


Product support is available for through following mediums.


Check the license detail here.


Check the changelog here

© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

Package Sidebar


npm i @syncfusion/ej2-layouts

Weekly Downloads






Unpacked Size

6.19 MB

Total Files


Last publish


  • syncfusionorg
  • essentialjs2
  • syncfusion-javascript