[Patternlibrary GUI v0.0.1]
  • Name: molecule/patterns/list-content
    Categories: lists

    a list of patterns


    This is a markup styled and linked list of patterns.

    examples

    project-name:

    Source

    <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>
    

    Output

    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>
    
    
    

    Output:

    no JavaScript reference available...

    no SASS/SCSS reference available...

    Pattern Specifications:


    Pattern Source:

    <div class="row panel-body">
        <div class="row columns large-12">
    		<ul class="accordion">
                {{#if patternlist}}
                	{{#each patternlist}}
    				    <li class="accordion-item row columns">
    				    	<!-- Accordion tab title {{../root}}/patterns/{{pattern.name}} -->
    				    	<a href="{{patternlink pattern.name}}" class="accordion-title row columns">
    					        <div class="columns medium-6 small-12">Name: <strong>{{pattern.name}}</strong> {{> "icon-pattern"}}</div>
    					        <div class="columns medium-6 hide-for-small show-for-medium categories">Categories:
    					        <strong>{{> "text-pattern-categories"}}</strong>
                                </div>
    					    </a>
    				    </li>
    				{{/each}}
    		    {{/if}}
    		    
    		</ul>
        </div>
    </div>

    no tests info available...

    no change-log info available...


    Git-Log: