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="flakes-information-box">
	<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="flakes-information-box">
			<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="flakes-information-box">
			<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>