Designsystem

Sidpanel Offcanvas

<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>
<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="c-tag c-tag--info">Obligatorisk</span><span class="c-tag--red">Fel</span> <div class="input__description__wrapper"> <p class="error"><span class="sjv-i-fel"></span>Fyll i förnamnet. </p> </div> </label> <div class="input__wrapper input__wrapper--text"> <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>

Sidpanel Hover

<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>
<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" role="radiogroup" aria-labelledby="legend_1"> <legend id="legend_1">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-focusElementID: ID till första tabbable element i modal innehålet.