Articles are lists of content, there are several different ways of displaying them. There are also several different components that can be added and removed which will alter the behavior.
<article class="article article--teaser article--divided">
<h2 class="article__title"><a href="https://www.ucas.com">Sed ratione recusandae id</a></h2>
<div class="article__url"><a href="https://www.ucas.com">https://www.ucas.com/ucas/teacher-training/apply-and-track/when-apply/apply</a></div>
<div class="article__summary">Magni beatae dolor eligendi neque sed in ut voluptatem quasi corporis ut et atque. quam quia quae ipsam consequatur perspiciatis dolorum aliquam laborum ut adipisci. accusantium distinctio saepe minima voluptates earum rerum et delectus sapiente. dolorem laborum ut ut. enim suscipit doloribus iure sed sapiente occaecati nam provident cum. tenetur velit ipsum sapiente dolor exercitationem qui inventore fuga</div>
<div class="article__metadata">
<strong class="article__type">Blog</strong>
· Section: <span class="tags__tag tag--scheme--16-18-choices">16-18 Choices</span><span class="tags__tag tag--scheme--undergraduate">Undergraduate</span>
· Created: 24 May 2016
</div>
</article><article class="article article--teaser">
<h2 class="article__title"><a href="https://www.ucas.com">Et voluptatem impedit nesciunt qui delectus similique atque alias aperiam</a></h2>
<div class="article__date">13 September 2016</div>
<div class="article__summary">Veniam qui pariatur aliquam corrupti officiis nostrum et consequatur reiciendis et omnis sunt aut. quidem sunt deserunt maxime ea fugit quis et voluptatum. autem sint dolor ea ut quasi quia. non rerum officiis sit eum recusandae</div>
</article><article class="article article--teaser">
<div class="article__strong-date">
<div class="date date--strong">
<span class="date__tag-day">14</span>
<span class="date__tag-month">Oct</span>
</div>
</div>
<h2 class="article__title"><a href="https://www.ucas.com">Eos maiores eum repellat dolorum fugiat</a></h2>
<div class="article__summary">Odit quasi quidem nihil et non illo. aut aspernatur est nulla provident officiis et commodi quam. quo impedit a aut</div>
</article>
<article class="article article--teaser">
<div class="article__image">
<img width="100" border="0" src="/images/example/thumbs/thumb-1.jpg">
</div>
<h2 class="article__title"><a href="https://www.ucas.com">Sit distinctio explicabo adipisci qui vel itaque possimus officia doloremque</a></h2>
<div class="article__date">13 September 2016</div>
<div class="article__summary">Illum magnam est deserunt nulla qui facilis ea placeat cupiditate alias. omnis quas facere ut. ut voluptatem et aut est commodi porro aspernatur occaecati fuga est dolor</div>
</article><article class="article article--teaser article--horizontal">
<h2 class="article__title"><a href="https://www.ucas.com">Ut aut et nisi est occaecati cupiditate beatae nihil ut est esse dolore et aut</a></h2>
<div class="article__date">13 September 2016</div>
<div class="article__summary">Quo tempora omnis odit distinctio ducimus ea. nesciunt unde ut possimus consequatur sunt eaque officiis similique officia accusantium repudiandae molestiae. perferendis dignissimos soluta quis nam odit architecto voluptatem laborum qui nostrum vitae quia animi ducimus. ipsam est a aut. ab rerum aut quisquam quae nam. consequatur ipsam reprehenderit quam ipsum magni</div>
</article>