Lots of progress, think I've figured out the spell format to use

client/spellsort/spellRenderer/spellRenderer.jsx

@@ -2,13 +2,96 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var COM = React.createClass({
+var Markdown = require('marked');
+
+var SpellRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			spells : []
+		};
+	},
+
+	//TODO: Add in ritual tag
+	getSubtitle : function(spell){
+		if(spell.level == 0) return <p><em>{spell.school} cantrip</em></p>;
+		if(spell.level == 1) return <p><em>{spell.level}st-level {spell.school}</em></p>;
+		if(spell.level == 2) return <p><em>{spell.level}nd-level {spell.school}</em></p>;
+		if(spell.level == 3) return <p><em>{spell.level}rd-level {spell.school}</em></p>;
+		return <p><em>{spell.level}th-level {spell.school}</em></p>;
+	},
+
+	getComponents : function(spell){
+		var result = [];
+		if(spell.components.v) result.push('V');
+		if(spell.components.s) result.push('S');
+		if(spell.components.m) result.push('M ' + spell.components.m);
+		return result.join(', ');
+	},
+
+	getHigherLevels : function(spell){
+		if(!spell.scales) return null;
+		return <p>
+			<strong><em>At Higher Levels. </em></strong>
+			<span dangerouslySetInnerHTML={{__html: Markdown(spell.scales)}} />
+		</p>;
+	},
+
+	getClasses : function(spell){
+		if(!spell.classes || !spell.classes.length) return null;
+
+		var classes = _.map(spell.classes, (cls)=>{
+			return _.capitalize(cls);
+		}).join(', ');
+
+		return <li>
+			<strong>Classes:</strong> {classes}
+		</li>
+	},
+
+
+	renderSpell : function(spell){
+		console.log('rendering', spell);
+		return <div className='spell' key={spell.id}>
+
+			<h4>{spell.name}</h4>
+			{this.getSubtitle(spell)}
+			<hr />
+			<ul>
+				<li>
+					<strong>Casting Time:</strong> {spell.casting_time}
+				</li>
+				<li>
+					<strong>Range:</strong> {spell.range}
+				</li>
+				<li>
+					<strong>Components:</strong> {this.getComponents(spell)}
+				</li>
+				<li>
+					<strong>Duration:</strong> {spell.duration}
+				</li>
+				{this.getClasses(spell)}
+			</ul>
+
+			<span dangerouslySetInnerHTML={{__html: Markdown(spell.description)}} />
+			{this.getHigherLevels(spell)}
+		</div>
+	},
+
+	renderSpells : function(){
+		return _.map(this.props.spells, (spell)=>{
+			return this.renderSpell(spell);
+		})
+	},
 
 	render : function(){
-		return <div className='COM'>
-			COM Ready!
+		return <div className='spellRenderer'>
+
+			<div className='phb'>
+				{this.renderSpells()}
+			</div>
+
 		</div>
 	}
 });
 
-module.exports = COM;
+module.exports = SpellRenderer;

client/spellsort/spellRenderer/spellRenderer.less

@@ -1,3 +1,40 @@
-.COM{
+@import (less) 'naturalcrit/phbStyle/phb.style.less';
+.pane{
+	position : relative;
+}
+.spellRenderer{
+	overflow-y : scroll;
+
+	&>.phb{
+		margin-right  : auto;
+		margin-bottom : 30px;
+		margin-left   : auto;
+		box-shadow    : 1px 4px 14px #000;
+
+		height : auto;
+		width : 100%;
+
+		display: flex;
+			flex-direction: column;
+			flex-wrap: wrap;
+
+		column-count         : initial;
+		column-fill          : initial;
+		column-gap           : initial;
+		column-width         : initial;
+		-webkit-column-count : initial;
+		-moz-column-count    : initial;
+		-webkit-column-width : initial;
+		-moz-column-width    : initial;
+		-webkit-column-gap   : initial;
+		-moz-column-gap      : initial;
+
+		.spell{
+			display: inline;
+			width : 8cm;
+
+		}
+
+	}
 
 }