07 Elements and components - pimmey/axala-docs GitHub Wiki

Gallery

This type takes advantage of parallax yet again and Materialize slider, which follows this structure:

<div class="slider">
    <ul class="slides">
        <li>
            <img src="./assets/images/work/bottle-detail/bottle-3.jpg" alt="Bottle III" />
        </li>
        <li>
            <img src="./assets/images/work/bottle-detail/bottle-4.jpg" alt="Bottle IV" />
        </li>
        <li>
            <img src="./assets/images/work/bottle-gradient-2.jpg" alt="Bottle Concept II" />
        </li>
    </ul>
</div>

It also needs to be initialised via Javascript. We also define a small check in order to set the slider's height:

var height = window.innerWidth < 600 ? 350 : 650;
$('.slider').slider({height: height});

Services

Using animated icons is really simple, you're just gonna need to paste the SVG code of the icon on your page. To accomplish that, go a head and download the needed icon pack from linea.io and open the downloaded pack. You're gonna need to find the icon in .svg format and open that with a text/code editor of your choice, then just paste the code in the .services-section element.

An example of how it might look:

<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewbox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
    <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M32.001,0.887c17.184,0,31.113,13.929,31.112,31.113              C63.114,49.185,49.184,63.115,32,63.113C14.815,63.114,0.887,49.185,0.888,32.001C0.885,14.816,14.815,0.887,32.001,0.887z"></path>
    <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M10,32c0-5.63,2.148-11.26,6.444-15.556              c8.591-8.593,22.521-8.593,31.112,0C51.852,20.74,54,26.37,54,32"></path>
    <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="24" y1="26" x2="30.333" y2="33.333"></line>
    <circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="35" r="2"></circle>
</svg>

We've created a useful mapping for the Linea icons.

Price box

<div class="price-box">
    <h4><sup>$</sup><span class="price">19</span></h4>
    <ul class="flow-text">
        <li>5 users<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="The number of allowed users">?</span></li>
        <li>Automation<span class="info tooltipped" data-position="top" data-delay="50" data-tooltip="Involves Gulp commands">?</span></li>
        <li>Validation</li>
        <li>Linting</li>
    </ul>
</div>

FAQ accordion 

<ul data-collapsible="accordion" class="collapsible flow-text">
    <li>
        <div class="collapsible-header active">— Is the starter pack really free?</div>
        <div class="collapsible-body">
            <p>A cattle she’d creepeth. That light make. Void two they’re, can’t us don’t creepeth. Fruitful there herb from signs she’d created whales them. Lights which face. Divided they’re first. Dry wherein own itself green it.</p>
        </div>
    </li>
    ...
</ul>
⚠️ **GitHub.com Fallback** ⚠️