Heartwood

Accordion 

<ul class="accordion">
    <li class="accordion__item">
        <button class="btn btn btn-full-width " type="button">
				<span class="btn__inner">
					<span class="btn__icon-wrapper">
						<?xml version="1.0" encoding="utf-8"?>
						<svg
							class='btn__icon '
							version="1.1"
							id="Layer_1"
							xmlns="http://www.w3.org/2000/svg"
							xmlns:xlink="http://www.w3.org/1999/xlink"
							x="0px"
							y="0px"
							width="24px"
							height="24px"
							viewBox="0 0 24 24"
							enable-background="new 0 0 24 24"
							xml:space="preserve">
						<path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"/><path fill="none" d="M0,0h24v24H0V0z"/>
						</svg>
					</span>
						<span class="btn__text">Not hello</span>
					
				</span>	
		</button>
        <div class="accordion__panel">
            <p>Hey look there is wayaaaaay more stuff in here</p>
        </div>
    </li>
    <li class="accordion__item accordion__item--expanded">
        <button class="btn btn btn-full-width " type="button">
				<span class="btn__inner">
					<span class="btn__icon-wrapper">
						<?xml version="1.0" encoding="utf-8"?>
						<svg
							class='btn__icon '
							version="1.1"
							id="Layer_1"
							xmlns="http://www.w3.org/2000/svg"
							xmlns:xlink="http://www.w3.org/1999/xlink"
							x="0px"
							y="0px"
							width="24px"
							height="24px"
							viewBox="0 0 24 24"
							enable-background="new 0 0 24 24"
							xml:space="preserve">
						<path d="M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z"/><path fill="none" d="M0,0h24v24H0V0z"/>
						</svg>
					</span>
						<span class="btn__text">Style Consulting</span>
					
				</span>	
		</button>
        <div class="accordion__panel">
            <p>Advice on your gear</p>
        </div>
    </li>
</ul>

<script src="../../js/03-structure/accordion.js"></script>
 
<ul class="accordion">
	<li class="accordion__item">
		{{> @simple-button text=buttonData.text icon=buttonData.icon className="btn btn-full-width"}}
		<div class="accordion__panel">
			<p>Hey look there is wayaaaaay more stuff in here</p>
		</div>
	</li>
	<li class="accordion__item accordion__item--expanded">
		{{> @simple-button text="Style Consulting" icon=buttonData.icon className="btn btn-full-width"}}
		<div class="accordion__panel">
			<p>Advice on your gear</p>
		</div>
	</li>
</ul>

<script src="{{ path '/js/03-structure/accordion.js'}}" ></script>
 
{
  "text": "TEST",
  "icon": "test",
  "buttonData": {
    "text": "Not hello",
    "icon": "<path d=\"M8.59,16.59L13.17,12L8.59,7.41L10,6l6,6l-6,6L8.59,16.59z\"/><path fill=\"none\" d=\"M0,0h24v24H0V0z\"/>"
  },
  "items": [
    {
      "text": "Hello",
      "panel": "Hey look there is wayaaaaay more stuff in here"
    },
    {
      "text": "Style Consulting",
      "panel": "Advice on your gear"
    }
  ]
}

Accordion

Accordions are used to truncate complex lists of information.