1. Narrative element
The Narrative element is a 12 col of a 16 col grid layout. Consists of two blocks of 6.
For semantic use, apply the .narrative_element mixin within the semantic class for the block element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.
Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.
HTML example:
<article>
<ul class="global_assignment">
<li class="media">image content</li>
<li class="text">
<h4>Narrative title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
<ul>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
</ul>
<p>Nunc <a href="#">volutpat mauris</a> non <a href="#">lectus fringilla</a> ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
</li>
</ul>
</article>
LESS mixin example:
.narrative_element() {
.grid_16(12);
> li {
.grid_16(6);
&:first-child {
.alpha;
}
&:last-child {
.omega;
}
}
.media {
.grid_16(6);
height: 250px;
}
.text {
.bulleted_list;
}
}
Example semantic LESS application:
.global_assignment {
.narrative_element;
}
1.1 Narrative element
To use a reverse UI version of the narrative element, simply swap the order of the .text and .media HTML blocks as shown below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.
Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.
HTML example:
<article>
<ul class="global_assignment">
<li class="text">
<h4>Narrative title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat mauris non lectus fringilla ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
<ul>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
<li><b>Lorem ipsum dolor sit amet</b> consectetur adipiscing.</li>
</ul>
<p>Nunc <a href="#">volutpat mauris</a> non <a href="#">lectus fringilla</a> ut sollicitudin magna dignissim. Duis lobortis mauris augue.</p>
</li>
<li class="media">image content</li>
</ul>
</article>