# Horizontal line in card - (small contribution)

**URL:** <https://discourse.nodered.org/t/horizontal-line-in-card-small-contribution/37847>\
**Category:** General\
**Created:** [21 December 2020 14:59 UTC](https://discourse.nodered.org/t/horizontal-line-in-card-small-contribution/37847 "2020-12-21T14:59:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)\
**Post date:** [21 December 2020 14:59 UTC](https://discourse.nodered.org/t/horizontal-line-in-card-small-contribution/37847/1 "2020-12-21T14:59:36Z")

</div>

I have come across a few topics where users are attempting to place a horizontal line in their UI. I myself had this need so messed around with a \</\>template node and some HTML. There could be better ways, but this is what I came up with. You can also include text if desired, or just remove that from the code. This is also a little fancy using box shadows, but it is easy just to make a simple line, change width, color...etc.

I have gotten a lot from this forum, just a little something to give back.

 ![horzline](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0fd164a9e7bc451bffb13c9f922f95848ab70ec7.png)

```auto
[{"id":"dbfc9026.affcc","type":"ui_template","z":"87cea03e.b710b","group":"b5ec3e8f.47604","name":"UI Horizontal line top with title","order":14,"width":20,"height":1,"format":"<html>\n <!--box-shadow: (left) -5px (top) -5px (blur) 5px (spread)5px (color)#888;-->\n<head>\n<style>\n\th1 {text-align: center;}\n\tp {text-align: center;}\n\tdiv {text-align: center;}\n</style>\n<hr style=\n \"border-top: 1px solid #a39d99;\n border-width: 0px 0px 0;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n height: 0px;\n margin-top: 0;\n border-bottom: 1px solid #a39d99;\n box-shadow: 0 0 3px #a39d99\";\n\t>\n<div>Historical Data Query</div> \n</html>\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":540,"wires":[[]]},{"id":"b5ec3e8f.47604","type":"ui_group","name":"Climate - Exterior","tab":"c2eeb8ac.68fa38","order":1,"disp":true,"width":20,"collapse":false},{"id":"c2eeb8ac.68fa38","type":"ui_tab","name":"Climate - Exterior","icon":"wb_sunny","order":2,"disabled":false,"hidden":false,"info":"help"}]

```

---

<div class="post-metadata">

**Author:** ![Tomadoggy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomadoggy/32/34065_2.png) [@Tomadoggy](https://discourse.nodered.org/u/Tomadoggy)\
**Post date:** [22 December 2020 18:33 UTC](https://discourse.nodered.org/t/horizontal-line-in-card-small-contribution/37847/2 "2020-12-22T18:33:23Z")

</div>

Small improvement to center the text without inadvertently changing the "div" css tag that is used throughout node red and altering other text elements. As I am learning, there is usually a better way to do things. In this case a simple use of the "center" tags is a much better way to go.

```auto
[{"id":"dbfc9026.affcc","type":"ui_template","z":"87cea03e.b710b","group":"b5ec3e8f.47604","name":"UI Horizontal line top with title","order":12,"width":20,"height":1,"format":"<html>\n <!--box-shadow: (left) -5px (top) -5px (blur) 5px (spread)5px (color)#888;-->\n<head>\n<hr style=\n \"border-top: 1px solid #a39d99;\n border-width: 0px 0px 0;\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n height: 0px;\n margin-top: 0;\n border-bottom: 1px solid #a39d99;\n box-shadow: 0 0 3px #a39d99\";\n\t>\n<center>Historical Data Query</center> \n</html>\n\n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":1190,"y":540,"wires":[[]]},{"id":"b5ec3e8f.47604","type":"ui_group","name":"Climate - Exterior","tab":"c2eeb8ac.68fa38","order":1,"disp":true,"width":20,"collapse":false},{"id":"c2eeb8ac.68fa38","type":"ui_tab","name":"Climate - Exterior","icon":"wb_sunny","order":3,"disabled":false,"hidden":false,"info":"help"}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 February 2021 18:33 UTC](https://discourse.nodered.org/t/horizontal-line-in-card-small-contribution/37847/3 "2021-02-20T18:33:28Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.