No notes defined.
<div class="sds-stackXl">
<nav id="navigation" class="d-flex align-items-center justify-content-between">
<nav class="sds-linkTabs">
<ul class="sds-linkTabs__inner nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="">Logo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">URL & Slogan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Creative Area</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Text</a>
</li>
</ul>
</nav>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Download template</span>
</button>
</nav>
<div id="content-wrapper" style="
background-color: #ffffff;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="d-flex align-items-center justify-content-center" style="
background-color: #f0f3f6;
border-radius: 16px;
padding: calc(72px * 2) 32px;
">
<div id="canvas-zone" style="
background-color: #ffffff;
">
canvas zone
</div>
</div>
<div id="footer" class="d-flex align-items-center justify-content-between" style="
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 32px;
">
<div class="form-group d-flex flex-column">
<label for="switch" class="sds-label -labelForm -formNoOffset">
Slogan
</label>
<label class="sds-switch -small" for="switch">
<input type="checkbox" class="sds-switch__input custom-control-input" id="switch">
<span class="sds-switch__shape custom-control custom-switch">
</span>
</label>
</div>
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-documentupload"></span>
<span class="sds-btn__text">Upload image</span>
</button>
</div>
</div>
</div>
<div class="{{ namespace }}stackXl">
<nav id="navigation" class="d-flex align-items-center justify-content-between">
{% render "@snet-link-tabs",linktabsOptions,true %}
{% render "@btn-primary--icon-left",{
icon: "icon-download",
text: "Download template"
},true %}
</nav>
<div id="content-wrapper" style="
background-color: {{ colorTokens.color.gray["0"].value }};
border: {{ spacerTokens.spacer.unit["2"].value }} solid {{ colorTokens.color.brand.secondary["30"].value }};
border-radius: {{ radiusTokens.radius["16"].value }};
">
<div class="d-flex align-items-center justify-content-center" style="
background-color: {{ colorTokens.color.brand.secondary["06"].value }};
border-radius: {{ radiusTokens.radius["16"].value }};
padding: calc({{ spacerTokens.spacer.unit["72"].value }} * 2) {{ spacerTokens.spacer.unit["32"].value }};
">
<div id="canvas-zone" style="
background-color: {{ colorTokens.color.gray["0"].value }};
">
canvas zone
</div>
</div>
<div id="footer" class="d-flex align-items-center justify-content-between" style="
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: {{ spacerTokens.spacer.unit["32"].value }};
">
{% if select %}
<div class="form-group" style="width: 460px">
{% render "@label--form",{text: "Logo"},true %}
{% render "@select" %}
</div>
{% elseif multipleSwitches %}
<div class="row row-sm">
<div class="col-auto">
<div class="form-group d-flex flex-column">
{% render "@label--form",{
classes: ["-formNoOffset"],
text: "Bridge",
labelFor: "bridge"
}, true %}
{% render "@switch--small",{
id: "bridge"
}, true %}
</div>
</div>
<div class="col-auto">
<div class="form-group d-flex flex-column">
{% render "@label--form",{
classes: ["-formNoOffset"],
text: "Marges",
labelFor: "marges"
},true %}
{% render "@switch--small",{
id: "marges",
checked: true
},true %}
</div>
</div>
</div>
{% else %}
<div class="form-group d-flex flex-column">
{% render "@label--form",{
classes: ["-formNoOffset"],
text: "Slogan",
labelFor: "switch"
},true %}
{% render "@switch--small",{
id: "switch"
},true %}
</div>
{% endif %}
{% render "@btn-secondary--icon-left",{
icon: "icon-documentupload",
text: "Upload image"
},true %}
</div>
</div>
</div>