Record lookup

The code for this example can be used in the Markdown visualization to create a card that contains details for a single record, such as a user profile.
Example code

<style>
.md-card {
  display: grid;
  gap: 0 var(--size6);
  grid-template-columns: max-content 1fr;
}

.md-card-info {
  grid-row: 1 / 1;
  grid-column: 2 / 2;
  font-size: 14px;
}

.md-card-info h4 {
  font-size: 32px;
  margin-bottom: 0;
}

.md-card-info p {
  margin: 0;
}

.md-profile {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.md-profile img {
  display: block;
  width: 200px;
  border-radius: 12px;
}

.md-profile p {
  text-align: center;
  font-size: 8px;
  color: var(--color-text1);
  margin: 0;
}

.md-card-metrics {
  grid-row: 2 / 2;
  display: flex;
  gap: var(--size4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-card-metrics li {
  padding-block: var(--size4);
}

.divider {
  background-color: var(--color-border2);
  width: 1px;
  margin-inline: var(--size2);
  margin-block: var(--size4);
}

.md-metric-label {
  font-size: 14px;
  color: var(--color-text2);
}
.md-metric-value {
  font-size: 27px;
  font-weight: bold;
}

</style>

<div class="md-card">
<div class="md-card-info">
<h4>{{result.0.users.full_name.value}}</h4>
<p><a href="mailto:{{result.0.users.email.value_static}}">{{result.0.users.email.value}}</a></p>
<p>{{result.0.users.city.value}}, {{result.0.users.state.value}} {{result.0.users.zip.value}}
<a href="http://www.google.com/maps/search/?api=1&query={{result.0.users.zip.value_static}}" target="_blank">view map</a>
</p>
</div>

<div class="md-profile">
<img src="https://robohash.org/{{result.0.users.email.value_static}}" />
<p>Robots lovingly delivered by Robohash.org</p>
</div>

<ul class="md-card-metrics">
<li>
<div class="md-metric-value">{{result.0.users.age.value}}</div>
<div class="md-metric-label">{{fields.users.age.label}}</div>
</li>
<li class="divider"></li>
<li>
<div class="md-metric-value">{{result.0.order_items.order_count.value}}</div>
<div class="md-metric-label">{{fields.order_items.order_count.label}}</div>
</li>
<li class="divider"></li>
<li>
<div class="md-metric-value">{{result.0.order_items.sale_price_sum.value}}</div>
<div class="md-metric-label">{{fields.order_items.sale_price_sum.label}}</div>
</li>

</ul>
</div>
Example code​

Example code
