Hello John Doe
My AccountLogout

Read Only Information

A neat way to display information in a structured way using the constructs Flakes makes available to us like Simple Grid, Definition Lists and Native Forms.


Product Details
Product Name
Pallet Truck (3 Tons)
Tags
Lifting, Industrial
Vendor
Lifting Equipment LLC
Product Type
Lifting
Product Description
A pallet jack, also known as a pallet truck, pallet pump, pump truck, or jigger is a tool used to lift and move pallets. The front wheels are mounted inside the end of the forks, and as the hydraulic jack is raised, the forks are separated vertically from the front wheels, forcing the load upward until it clears the floor. The pallet is only lifted enough to clear the floor for subsequent travel.
Product Specs
SKU
23-43-4343-13
Initial Stock Level
$314
Cost Price
$1200
Wholesale Price
$1400
Retail Price
$1995

Step 1: Create a grid

Look at the grid documentation to understand how they work. For the above example, I made a 4 column grid with two children that span 3 and 1. A gutter of 20px helps keep the two slightly apart.

<div class="grid-4 gutter-20">
	<div class="span-3">
		...
	</div>
	<div class="span-1">
		...
	</div>
</div>

Step 2: The fieldset

What goes inside each of those grid columns is a fieldset. The fieldset gives us a nice title and a border around our information.

<fieldset class="read-only-information">
	<legend>Product Specs</legend>
</fieldset>

Step 3: Our definition list

Our information then goes into our definition lists which in turn goes into our fieldsets.

<dl>
	<dt>SKU</dt>
	<dd>...</dd>
</dl>
<dl>
	<dt>Initial Stock Level</dt>
	<dd>...</dd>
</dl>
<dl>
	<dt>Cost Price</dt>
	<dd>...</dd>
</dl>
<dl>
	<dt>Wholesale Price</dt>
	<dd>...</dd>
</dl>
<dl>
	<dt>Retail Price</dt>
	<dd>...</dd>
</dl>

Step 4: Put it all together

Might look a bit intimidating but it's just a mashup of a bunch of components. It's a grid with 2 columns. Each contain a fieldset. The first fieldset has a nested grid. And the definition lists hold the information.

<div class="grid-4 gutter-20">
	<div class="span-3">
		<fieldset class="read-only-information">
			<legend>Product Details</legend>
			<div class="grid-4">
				<dl class="span-2">
					<dt>Product Name</dt>
					<dd>...</dd>
				</dl>
				<dl class="span-2">
					<dt>Tags</dt>
					<dd>...</dd>
				</dl>
			</div>
			<div class="grid-4">
				<dl class="span-2">
					<dt>Vendor</dt>
					<dd>...</dd>
				</dl>
				<dl class="span-2">
					<dt>Product Type</dt>
					<dd>...</dd>
				</dl>
			</div>
			<dl>
				<dt>Product Description</dt>
				<dd>...</dd>
			</dl>
		</fieldset>
	</div>
	<div class="span-1">
		<fieldset class="read-only-information">
			<legend>Product Specs</legend>
			<dl>
				<dt>SKU</dt>
				<dd>...</dd>
			</dl>
			<dl>
				<dt>Initial Stock Level</dt>
				<dd>...</dd>
			</dl>
			<dl>
				<dt>Cost Price</dt>
				<dd>...</dd>
			</dl>
			<dl>
				<dt>Wholesale Price</dt>
				<dd>...</dd>
			</dl>
			<dl>
				<dt>Retail Price</dt>
				<dd>...</dd>
			</dl>
		</fieldset>
	</div>
</div>