@syncfusion/ej2-layouts
Version:
A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.
145 lines (86 loc) • 14.2 kB
Markdown
# 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.
> 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/> [Angular](https://www.syncfusion.com/angular-components?utm_medium=listing&utm_source=github) | [<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/> [React](https://www.syncfusion.com/react-components?utm_medium=listing&utm_source=github) | [<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/> [Vue](https://www.syncfusion.com/vue-components?utm_medium=listing&utm_source=github) | [<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/> [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github) | [<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/> [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github) |
| :-----: | :-----: | :-----: | :-----: | :-----: |
## 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 2025 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.