Äldre version av Sidpanel Offcanvas
Sidpanel vänster offcanvas
<![CDATA[
<aside class="c-sidpanel--left" rel="c-left-sidpanel-js" data-mainContentID="c-sidpanel--mainContent2"
data-triggersID="sidpanelLeft__offcanvas,stangKnapp4,stangKnapp5" data-focusElementID="checkbox1">
<div class="c-sidpanel__content">
<span class="e-lead">What is Lorem Ipsum?</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make
a type specimen
book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining
essentially unchanged. </p>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp4">Stäng</button>
</div>
</aside>
]]>
Sidpanel höger offcanvas
<![CDATA[
<aside class="c-sidpanel--right" rel="c-right-sidpanel-js" data-mainContentID="c-sidpanel--mainContent1"
data-focusElementID="stangKnapp3" data-triggersID="sidpanelRight__offcanvas,stangKnapp3">
<div class="c-sidpanel__content">
<div class="c-input--medium c-input--error">
<label for="input-medium-text-8">Förnamn
<span class="label__tag-container">
<span class="c-tag"> Obligatorisk </span>
<span class="c-tag--red"> Fel </span>
</span>
<span class="label__description">
<span class="error"><span class="sjv-i-fel"></span>Fyll i förnamnet.
</span>
</span>
</label>
<div class="input__wrapper">
<input autocomplete="given-name" id="input-medium-text-8" type="text" name="text8">
</div>
</div>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp3">Stäng</button>
</div>
</aside>
]]>
Äldre version av Sidpanel Hover
Sidpanel vänster hover
<![CDATA[
<aside class="c-sidpanel--right" rel="c-right-sidpanel-js"
data-triggersID="sidpanelRight__hover,stangKnapp1" data-focusElementID="stangKnapp1">
<div class="c-sidpanel__content">
<div class="c-tabs" rel="c-tabs-js">
<ul id="myTabs_1" class="c-tabs__labels" role="tablist" aria-label="Code Examples">
<li role="presentation">
<button class="tab-label is-active" id="panel1__label" aria-selected="true" role="tab"
aria-controls="panel1"><span class="tab-label__text">HTML</span></button>
</li>
<li role="presentation">
<button class="tab-label" id="panel2__label" aria-selected="false" aria-controls="panel2"
tabindex="-1" role="tab"><span class="tab-label__text">JavaScript</span></button>
</li>
</ul>
<div class="c-tabs__content" data-tabs="myTabs_1">
<div id="panel1" class="c-tabs__panel is-active" role="tabpanel" aria-labelledby="panel1__label">
<p>Hi</p>
</div>
<div id="panel2" class="c-tabs__panel" role="tabpanel" aria-labelledby="panel2__label">
<p>Hej</p>
</div>
</div>
</div>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp1">Stäng</button>
</div>
</aside>
]]>
Sidpanel höger hover
<![CDATA[
<aside class="c-sidpanel--left" rel="c-left-sidpanel-js" data-triggersID="sidpanelLeft__hover,stangKnapp2"
data-focusElementID="stangKnapp2">
<div class="c-sidpanel__content">
<fieldset class="c-radio-btn-group--medium">
<legend>Välj din favoritfärg</legend>
<div class="c-radio-btn--medium">
<input id="radio1" name="radio_group1" type="radio" value="Ingen" checked="checked">
<label for="radio1">Ingen</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio2" name="radio_group1" type="radio" value="Blå">
<label for="radio2">Blå</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio3" name="radio_group1" type="radio" value="Gul">
<label for="radio3">Gul</label>
</div>
<div class="c-radio-btn--medium">
<input id="radio4" name="radio_group1" type="radio" value="Röd">
<label for="radio4">Röd</label>
</div>
</fieldset>
<div class="c-space--m"></div>
<button class="c-btn--medium" id="stangKnapp2">Stäng</button>
</div>
</aside>
]]>
Atttributes
data-triggersID: ID till alla knappar/iconer/htmlElement som ska öppna eller stänga modalen. Det
kan bli flera trigger.
data-mainContentID: ID till main content / HTML block som ska flytta på insidan. Bara för
offcanvas variant.
data-width: Kan ställa in bredden på sidopanelen. Om inget angivet är default; 15.625em.
data-focusElementID: ID till första tabbable element i modal innehålet.
