---
title: Overview
position: 1
seo_title: Overview of the TileLayout Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  TileLayout component and check out the extensive set of available options in
  its live demo.
---
## TileLayout Overview

The TileLayout component is a user interface (UI) element that is based on the two-dimensional CSS grid and is able to display content in draggable and reorderable tiles. The tiles can be displayed across multiple rows and columns.

Through its extensive configuration options, the TileLayout allows you to build customizable dashboards and create intuitive layouts for web projects.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/tilelayout/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/tilelayout/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/tilelayout"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/tilelayout"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/tilelayout"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/tilelayout"}],"demo":"components/tilelayout/overview"}'></LiveDemo>

### Anatomy

The anatomy of the TileLayout summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"TileLayout item header"},{"text":"TileLayout item content area"},{"text":"TileLayout item title"},{"text":"TileLayout item"},{"text":"TileLayout column"},{"text":"TileLayout row"}]}'>![A Telerik and Kendo UI TileLayout component.](images/components-tilelayout-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI TileLayout component.")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular TileLayout ","description":"Find more information about the Kendo UI for Angular TileLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout/"}'>![Kendo UI for Angular logo](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor TileLayout ","description":"Find more information about the Telerik UI for Blazor TileLayout in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/tilelayout/overview"}'>![Telerik UI for Blazor logo](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery TileLayout ","description":"Find more information about the Kendo UI for jQuery TileLayout in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/tilelayout/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact TileLayout ","description":"Find more information about the KendoReact TileLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue TileLayout ","description":"Find more information about the Kendo UI for Vue TileLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/tilelayout/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core TileLayout ","description":"Find more information about the Telerik UI for ASP.NET Core TileLayout component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/tilelayout/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC TileLayout ","description":"Find more information about the Telerik UI for ASP.NET MVC TileLayout component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/tilelayout/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>