# Line

With the **Line** element**,** you can put horizontal solid or dashed lines in different sizes.​‌

The **Line** element contains the following elements:

* **Line Size** - Size can be small, medium, or large
* **Line Style** - Style can be solid or dashed
* **Line Length** - Length can be short, medium, or long
* **Hidden by Default** - The element will be hidden until a corresponding condition is met
* **Additional Classes** - Add extra classes to the HTML elements to further style changes

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FKDjutOWftllIxmKUqNd6%2Fline.png?alt=media\&token=5cc46bef-f9fd-4c6f-94a0-d98cdd0dfc29)

Let's fill the **Line** element attributes.

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2FS0WfO08pv8FEKGwgIXlj%2Fline1.png?alt=media\&token=28a615f0-889b-4415-9098-36a89708f0dd)

You can see all elements in the calculator in this **Line** example to check how it appears.

Here is the result of this calculator with **Line** element appearance.

![](https://834137925-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTO7zmTA5-HpvK8JDA%2Fuploads%2Fe308ZdyMjvOxsTKtXkJz%2FCCBN%20Line%20ready.jpg?alt=media\&token=c35ef5a3-da7a-4f90-9240-51949b4abda3)