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

Looker Q&A Looker
1

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-13598?postid=26774#post26774

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>
2

took some tweaking, but figured it out…

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>
2 Likes
3

Hey @David_P1 ,

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

<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>
1 Like