cms_code_example.twig

<style>
	.code-example {
		overflow-y: scroll;
		padding: 1rem;
		background-color: #eee;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre;
		color: #666666;
		border-left: 3px solid #7b7b7b;
		tab-size: 4;
		-moz-tab-size: 4;
	}
</style>

{% verbatim %}
<pre class="code-example">
&lt;style&gt;
	.directory-entry {
		margin: 15px 30px 15px 0;
		width: 300px;
		max-width: 100%;
		display: inline-block;
		vertical-align: top;
	}
&lt;/style&gt;

{% set lastCategory = &quot;&quot; %}

{% for staff in su.collection( &quot;directory&quot; ).sort( &quot;category&quot; ).sort( &quot;name.last&quot; ) %}
	{% if staff.category != lastCategory %}
		&lt;h3&gt;{{ staff.category }}&lt;/h3&gt;
		{% set lastCategory = staff.category %}
	{% endif %}
	&lt;div class=&quot;directory-entry&quot;&gt;
		&lt;img src=&quot;{{ staff.image.fill( 269,180 ) }}&quot; width=&quot;100%&quot;/&gt;
		&lt;h4&gt;{{ staff.name.first }} {{ staff.name.last }}&lt;/h4&gt;
		&lt;div&gt;{{ staff.title }}&lt;/div&gt;
		&lt;div&gt;&lt;a href=&quot;tel:{{ staff.phone }}&quot;&gt;{{ staff.phone }}&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;&lt;a href=&quot;mailto:{{ staff.email }}&quot;&gt;{{ staff.email }}&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;{{ staff.description }}&lt;/div&gt;
	&lt;/div&gt;
{% endfor %}
</pre>
{% endverbatim %}