# 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](https://ej2.syncfusion.com/products/images/layout/readme.png)

> 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](https://www.syncfusion.com/eula/es/). To acquire a license, you can [purchase](https://www.syncfusion.com/sales/products/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).

> A free [community license](https://www.syncfusion.com/products/communitylicense/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) 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](https://www.syncfusion.com/javascript-ui-controls/js-card?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Container used to display content in specific structure.
  * [Getting Started](https://ej2.syncfusion.com/documentation/card/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/basic.html)

* [JavaScript Avatar](https://www.syncfusion.com/javascript-ui-controls/js-avatar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to add images or initials or icons in different shapes and sizes to your application.
  * [Getting Started](https://ej2.syncfusion.com/documentation/avatar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/default.html)

* [JavaScript Splitter](https://www.syncfusion.com/javascript-ui-controls/js-splitter?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to construct a different layout using its multiple and nested panes with resizable.
  * [Getting Started](https://ej2.syncfusion.com/documentation/splitter/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html)

* [JavaScript Timeline](https://www.syncfusion.com/javascript-ui-controls/js-timeline?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to build timelines to showcases user activities, tracking progress, narrating historical timelines, and more.
  * [Getting Started](https://ej2.syncfusion.com/documentation/timeline/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/default.html)

* [JavaScript Dashboard Layout](https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
  * [Getting Started](https://ej2.syncfusion.com/documentation/dashboard-layout/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)
  * [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/default.html)

## Supported Frameworks

These components are available in following list of:

| [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
| :-----: | :-----: | :-----: | :-----: | :-----: |

## Use Case samples

* IT Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm))
* Swipeable Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/swipeable.html))
* Flip Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/flip.html))
* Tile View ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/tile.html))
* Contact Application ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/listview.html))
* Avatar Badge ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/badge.html))
* Avatar Card ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/card.html))
* SEO Analysis Dashboard ([Live Demo](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/analytics-dashboard.html))

## Key Features

* Card

  * [Header](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/basic.html) - Header supports to include title, subtitle along with image.

  * [Images and Title](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/reveal.html) - Support to include images with customizable caption positions in it.

  * [Action Buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/vertical.html) - Supports to add buttons within the card either in vertical or horizontal alignment.

  * [Horizontal Card](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/card/horizontal.html) - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.

* Avatar
  * [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/default.html) - Provided `2` types of avatars such as `default` and `circle`.

  * [Sizes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/avatar/types.html) - Supports `7` different sizes to adapt the various application scenario.

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

* Splitter

  * [Multiple Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html) - Provided an option to configure more than two panes.

  * [Resizable Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/code-editor-layout.html) - Supports resizable to adjust its pane size dynamically.

  * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/default.html) - The panes can orient either `horizontally` or `vertically`.

  * [Integration](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/accordion-navigation-menu.html) - Other JavaScript UI controls can be integrated within panes.

  * [Nested Panes](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/splitter/code-editor-layout.html) - Another splitter can be integrated within panes to create a complex layout.

* Timeline

  * [Orientation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Display items in a horizontal or vertical orientation.

  * [Opposite content](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) -  Display additional information opposite to the item content.
  
  * [Items alignment](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
  
  * [Reverse timeline](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/api.html) - Shows the timeline items in the reverse order.
  
  * [Templates](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/timeline/template.html) - Customize the default appearance, including styling the dot item, templated content, and more.

* Dashboard Layout

  * [Drag and Drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Allows drag and drop of panels at the desired location within the dashboard.

  * [Floating](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Floats the panels upward when the dragging option is enabled.

  * [Resizing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/properties.html) - Support to resize the panels in any direction as per the requirement.

  * [MediaQuery](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm#/fluent2/dashboard-layout/default.html) - 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](https://www.syncfusion.com/support/directtrac/incidents/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).
* New [GitHub issue](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).
* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm) with tag `syncfusion` and `ej2`.

## License

Check the license detail [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm).

## Changelog

Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/layouts/CHANGELOG.md/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-layout-npm)

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