How to format text tiles in dashboards-next similar to old dashboards?

David_P1
Participant V

Anyone has any idea how to achieve the same look from the old dashboards with dashboards-next for text tiles?

I am using the code that @izzymiller posted in this link:

https://community.looker.com/dashboards-looks-7/center-align-linked-image-in-dashboard-text-tile-135...

Code:

**Another colored card**

<hr>

<div class="alert alert-warning" >

<div class="card-header">

⚠️ Featured

</div>

<div class="card-body">

<h5 class="card-title">Special title treatment</h5>

<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

<a href="www.google.com" class="btn btn-primary">Go somewhere</a>

</div>

</div>
f0e4bf47-a901-49b9-8318-84d0ac332fc1.png
View in the old dashboards
354b4378-8b47-4b83-b241-725b2bb66bf5.png
View in dashboards-next
0 2 3,497
2 REPLIES 2

David_P1
Participant V

took some tweaking, but figured it out… 

0d01da58-db97-433a-947d-659b74321a95.png

here the code in case it helps someone:

<div style="background-color:#fceed2;  padding: 20px; border-radius: 12px;">

<font color="#f77e2c" size="6">
⚠️ Warning
</font>

<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="www.google.com" class="btn btn-primary">Go somewhere</a>
</div>

</div>

minerkt
Participant IV

Hey @David_P1 ,

Dashboards-Next also supports the <button> tag and so taking your code one step further with a styled button:

106d5549-fd3e-4d41-a36a-c76aaa2fdde3.png
<div style="background-color:#fceed2;  padding: 20px; border-radius: 12px;">

<font color="#f77e2c" size="6">
⚠️ Warning
</font>

<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="http://www.google.com" class="btn btn-primary">
<button style="color:white; background:blue">Go somewhere</button>
</a>
</div>

</div>
Top Labels in this Space
Top Solution Authors