# Appearance

In this article, you will find information about the rendering and styling options of the Telerik UI for ASP.NET MVC TreeView.

For a live example, refer to the [Appearance Demo of the TreeView](https://demos.telerik.com/aspnet-mvc/treeview/appearance).

## Size

The `Size` option controls the overall size of the TreeView. The `k-treeview-{size}` class, which is applied to the wrapping div element of the TreeView, reflects the value of the `Size` option.

The following values are available for the `Size` option:

* `Small`—small size (applies the `k-treeview-sm` class to the wrapping div element)
* `Medium`—medium size (applies the `k-treeview-md` class to the wrapping div element)
* `Large`—large size (applies the `k-treeview-lg` class to the wrapping div element)

> When not explicitly set, the applied theme controls the default size.

> The `None` value is deprecated. Use custom CSS instead.

The example below shows a basic TreeView configuration and how to set `Size` to `Large`:

```Razor HtmlHelper
    @(Html.Kendo().TreeView()
        .Name("treeview")
        .Size(ComponentSize.Large)
        .Items(items =>
        {
            items.Add().Text("Item 1").Expanded(true)
                .Items(subItems =>
                {
                    subItems.Add().Text("Item 1.1");
                    subItems.Add().Text("Item 1.2");
                    subItems.Add().Text("Item 1.3");
                });
            items.Add().Text("Item 2")
                .Items(subItems =>
                {
                    subItems.Add().Text("Item 2.1");
                    subItems.Add().Text("Item 2.2");
                    subItems.Add().Text("Item 2.3");
                });
            items.Add().Text("Item 3");
        })
    )
```

Below is the HTML that is affected by the `Size` option. The changes are applied to the `div.k-treeview` wrapping element:

```html
<div id="treeview" data-role="treeview" class="k-treeview k-treeview-lg" tabindex="0" aria-busy="false">
    ...
</div>
```

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/components-rendering-overview)
* [Appearance Demo of the TreeView](https://demos.telerik.com/aspnet-mvc/treeview/appearance)