tabler/pages/_includes/parts/datagrid.html

<div class="datagrid">
	<div class="datagrid-item">
		<div class="datagrid-title">Registrar</div>
		<div class="datagrid-content">Third Party</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Nameservers</div>
		<div class="datagrid-content">Third Party</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Port number</div>
		<div class="datagrid-content">3306</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Expiration date</div>
		<div class="datagrid-content">–</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Creator</div>
		<div class="datagrid-content">
			{% assign creator = people[0] %}
			<div class="d-flex align-items-center">
				{% include "ui/avatar.html" person=creator rounded=true size="xs" class="me-2" %}
				{{ creator.full_name }}
			</div>
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Age</div>
		<div class="datagrid-content">15 days</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Edge network</div>
		<div class="datagrid-content">
			{% include "ui/status.html" text="Active" color="green" %}
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Avatars list</div>
		<div class="datagrid-content">
			{% include "ui/avatar-list.html" stacked=true text="+3" size="xs" %}
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Checkbox</div>
		<div class="datagrid-content">
			<label class="form-check">
				<input class="form-check-input" type="checkbox" checked>
				<span class="form-check-label">Click me</span>
			</label>
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Icon</div>
		<div class="datagrid-content">
			{% include "ui/icon.html" icon="check" color="green" %}
			Checked
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Form control</div>
		<div class="datagrid-content">
			<input type="text" class="form-control form-control-flush" placeholder="Input placeholder">
		</div>
	</div>
	<div class="datagrid-item">
		<div class="datagrid-title">Longer description</div>
		<div class="datagrid-content">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
	</div>
</div>