# TVSB - Markdown Help for Title Panel

**URL:** <https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957>\
**Category:** Kibana\
**Created:** [January 8, 2025, 9:12pm UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957 "2025-01-08T21:12:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![erikg](https://avatars.discourse-cdn.com/v4/letter/e/91b2a8/32.png) [@erikg](https://discuss.elastic.co/u/erikg)\
**Post date:** [January 8, 2025, 9:12pm UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/1 "2025-01-08T21:12:11Z")

</div>

Hello,

I want to create a text panel where I can add links to the right and wording on the left.  
This is what I am trying to do:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/1/f1d2add78d203ba3fcecec4705c5e15ea5570f5e.png)  
^  
Like the image above, I want to say something like "Welcome to Elastic" and the left of the same line , add some links.

---

<div class="post-metadata">

**Author:** ![stephenb](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/stephenb/32/40856_2.png) [@stephenb](https://discuss.elastic.co/u/stephenb)\
**Post date:** [January 9, 2025, 5:25am UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/2 "2025-01-09T05:25:48Z")

</div>

Don't think you are going to be able to do that with TSVB / Markdown.  
HTML supports that simple markdown does not as far as I know... probable need to create 2 panels

---

<div class="post-metadata">

**Author:** ![GinkoLucas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ginkolucas/32/107055_2.png) [@GinkoLucas](https://discuss.elastic.co/u/GinkoLucas)\
**Post date:** [January 9, 2025, 11:26am UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/3 "2025-01-09T11:26:15Z")

</div>

Hi, you can try to use Custom CSS : TSVB Visualization\>Markdown\>Panel options\>Style\>Custom CSS

I managed to make a responsive menu like this :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/d/7d22bb52b81ceac3a449018d77fa3ac0977ccfd3.png)

This combines markdown and css, maybe you'll be able to do what you want!

---

<div class="post-metadata">

**Author:** ![erikg](https://avatars.discourse-cdn.com/v4/letter/e/91b2a8/32.png) [@erikg](https://discuss.elastic.co/u/erikg)\
**Post date:** [January 9, 2025, 2:40pm UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/4 "2025-01-09T14:40:10Z")

</div>

Hey @GinkoLucas ,  
would mind sharing the css you wrote to create this?  
Thanks man!

---

<div class="post-metadata">

**Author:** ![GinkoLucas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ginkolucas/32/107055_2.png) [@GinkoLucas](https://discuss.elastic.co/u/GinkoLucas)\
**Post date:** [January 9, 2025, 2:45pm UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/5 "2025-01-09T14:45:59Z")

</div>

Markdown :

```auto
- [Menu](https://www.google.com/)
- Click here
  - [First link](https://www.google.com/)
  - [Second link](https://www.google.com/)
- Previous
   - [Yes](https://www.google.com/)
   - [No](https://www.google.com/)

```

Css :

```auto
ul, li {
    margin:0; padding:0; list-style: none; position: relative;
}
li:hover {
    cursor:pointer;
}
a {
    text-decoration:none;
}
ul li:nth-child(3n) {
    background-color: #017f75;
}
ul li:nth-child(3n+1) {
    background-color: #45a29a;
}
ul li:nth-child(3n+2) {
    background-color: #73b9b3;
}

/* Level 1 */
ul {
    display: inline-flex; flex-wrap: wrap;
}
ul li {
    display: inline-flex; padding: 0 1rem 0 1rem; text-align:left; margin-right: 0.1rem; color: #FFFFFF; height: 4rem; align-items: center;
}
ul li:hover {
    transition: all 0.3s ease-out; background-color: #0d5147; color: #c9f95a;
}

/* Level 2 */
ul ul {
    display: none;
}
ul ul li {
    display: flex; white-space: nowrap; height: 4rem; align-items: center;
}
ul li:hover > ul {
    display: flex; position: absolute; top: 4rem; left: 0;
}

```

It's not perfect, but I imagine you're going to improve it.

---

<div class="post-metadata">

**Author:** ![stephenb](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/stephenb/32/40856_2.png) [@stephenb](https://discuss.elastic.co/u/stephenb)\
**Post date:** [January 9, 2025, 3:41pm UTC](https://discuss.elastic.co/t/tvsb-markdown-help-for-title-panel/372957/6 "2025-01-09T15:41:04Z")

</div>

Wow @GinkoLucas I didn't even know you could do that!!! Today I Learned