---
title: 'molecule/patterns/list-content'
description: a list of patterns
source: './patterns-list-content.html'
example: './example.html'
sass: 
js:
---

This is a markup styled and linked list of patterns.

## examples

project-name:
```html_example
<ul class="accordion">
    <li class="accordion-item row columns">
    	<a href="/pl/patterns/atoms/icon/category" class="accordion-title row columns">
	        <div class="columns medium-6 small-12">Name: <strong>atom/icon/category</strong>     <i class="fa fa-square-o"></i></div>
	        <div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
	        <strong><span class="name">basics</span>, <span class="name">gfx</span></strong>
            </div>
	    </a>
    </li>
    <li class="accordion-item row columns">
    	<a href="/pl/patterns/atoms/icon/pattern" class="accordion-title row columns">
	        <div class="columns medium-6 small-12">Name: <strong>atom/icon/pattern</strong>     <i class="fa fa-square-o"></i></div>
	        <div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
	        <strong><span class="name">basics</span>, <span class="name">gfx</span></strong>
            </div>
	    </a>
    </li>
    <li class="accordion-item row columns">
    	<a href="/pl/patterns/atoms/link" class="accordion-title row columns">
	        <div class="columns medium-6 small-12">Name: <strong>atom/link</strong>     <i class="fa fa-square-o"></i></div>
	        <div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
	        <strong><span class="name">basics</span>, <span class="name">texts</span></strong>
            </div>
	    </a>
    </li>
</ul>
```