Dashboard Grid

Responsive grid container for placing dashboard widgets.

Preview · Dashboard Grid

Code

HTML · @primus/ui-core

<div class="row">
  <div class="col-4"><div class="card" style="padding:0.75rem;font-size:0.875rem;text-align:center">Widget 1</div></div>
  <div class="col-4"><div class="card" style="padding:0.75rem;font-size:0.875rem;text-align:center">Widget 2</div></div>
  <div class="col-4"><div class="card" style="padding:0.75rem;font-size:0.875rem;text-align:center">Widget 3</div></div>
</div>

React

import { DashboardGrid, PrimusStatCard } from 'primus-react-ui';

<DashboardGrid columns={3}>
  <PrimusStatCard title="Revenue" value="$98k" />
  <PrimusStatCard title="Users"   value="12.4k" />
  <PrimusStatCard title="Churn"   value="2.1%" />
</DashboardGrid>

Angular

<primus-dashboard-grid [columns]="3">
  <primus-stats-card label="Revenue" [value]="'$98k'"></primus-stats-card>
  <primus-stats-card label="Users"   [value]="'12.4k'"></primus-stats-card>
</primus-dashboard-grid>

Props

Prop	Type	Default	Description
columns	1 | 2 | 3 | 4	3	Number of columns

Version history

See the Changelog for version history and breaking changes.