<div class="dashboard-files-card">
<div class="dashboard-files-card__head">
<div class="dashboard-files-card__left-side">
<h3 class="dashboard-files-card__title">Metadata</h3>
<p class="dashboard-files-card__description">Metadata is data about the data which helps users to understand more about the data and how it might be useful in a particular case.</p>
</div>
<div class="dashboard-files-card__right-side">
<a class="alert-tag alert-tag--anchor" href="#">
<span class="alert-tag__icon"><svg width="16" height="16" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 5.83333C6.70833 5.83333 6.41667 6.06667 6.41667 6.41667V9.91667C6.41667 10.2667 6.65 10.5 7 10.5C7.29167 10.5 7.58333 10.2667 7.58333 9.91667V6.41667C7.58333 6.125 7.29167 5.83333 7 5.83333ZM7 3.5C6.70833 3.5 6.41667 3.73333 6.41667 4.08333C6.41667 4.375 6.65 4.66667 7 4.66667C7.29167 4.66667 7.58333 4.43333 7.58333 4.08333C7.58333 3.79167 7.29167 3.5 7 3.5ZM7 0C3.15 0 0 3.15 0 7C0 10.85 3.15 14 7 14C10.85 14 14 10.85 14 7C14 3.15 10.85 0 7 0ZM7 12.8333C3.79167 12.8333 1.16667 10.2083 1.16667 7C1.16667 3.79167 3.79167 1.16667 7 1.16667C10.2083 1.16667 12.8333 3.79167 12.8333 7C12.8333 10.2083 10.2083 12.8333 7 12.8333Z" fill="#1D1536" />
</svg>
</span>
<span class="alert-tag__content">Learn more about metadata</span>
</a>
</div>
</div>
<div class="dashboard-files-card__groups">
<div class="dashboard-files-card__group">
<span>
<div class="icon">
<i class="material-icons icon__mat-icon">reorder</i>
</div>
</span>
<span id="stat-metadata">Include metadata</span>
<span aria-labelledby="stat-metadata" class="dashboard-files-card__value">64%</span>
</div>
<div class="dashboard-files-card__group dashboard-files-card__graph">
<img src="assets/images/dashboard-samples/overview-graph-files.png" alt="Metadata by type">
</div>
</div>
</div>
<div class="dashboard-files-card">
<div class="dashboard-files-card__head">
<div class="dashboard-files-card__left-side">
<h3 class="dashboard-files-card__title">Metadata</h3>
<p class="dashboard-files-card__description">Metadata is data about the data which helps users to understand more about the data and how it might be useful in a particular case.</p>
</div>
<div class="dashboard-files-card__right-side">
{% render '@alert-tag--general', { label: 'Learn more about metadata' } %}
</div>
</div>
<div class="dashboard-files-card__groups">
<div class="dashboard-files-card__group">
<span>{% render '@icon', { icon_name: 'reorder' } %}</span>
<span id="stat-metadata">Include metadata</span>
<span aria-labelledby="stat-metadata" class="dashboard-files-card__value">64%</span>
</div>
<div class="dashboard-files-card__group dashboard-files-card__graph">
{# Consider using this or equivalent when the graph doesn't have an embedded title? #}
{# <div class="graph-label">Types of Metadata</div> #}
<img src="assets/images/dashboard-samples/overview-graph-files.png" alt="Metadata by type">
</div>
</div>
</div>
/* No context defined. */
.dashboard-files-card {
border-left: 4px solid $teal;
&--grant {
border-left-color: $orange;
}
box-shadow: 1px 4px 4px 4px rgba(0, 0, 0, 0.06);
padding: 20px 24px;
margin-bottom: 20px;
&__head {
display: flex;
}
&__right-side {
min-width: 40%;
@include breakpoint($medium) {
min-width: 25%;
}
}
&__title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 16px;
display: block;
}
&__description {
font-weight: 400;
font-size: 16px;
}
&__groups {
display: flex;
flex-direction: column;
@include breakpoint($medium) {
flex-direction: row;
}
}
&__group {
max-width: 100%;
padding: 2rem 0;
border-bottom: solid 1px $blue-tint-dark;
@include breakpoint($medium) {
max-width: 20%;
padding: 0 2rem;
border-bottom-width: 0;
border-right: solid 1px $blue-tint-dark;
}
&:last-child {
border-width: 0;
}
}
&__value {
font-size: 1.2rem;
font-weight: 700;
}
&__graph {
flex-grow: 1;
max-width: 100%;
}
}
No notes defined.