Module: Default

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" style="width: 460px">
                <label for="" class="sds-label -labelForm">
                    Logo

                </label>
                <div class="sds-select">
                    <select id="" class="sds-select form-control">

                        <option value="opt-0">Option 1</option>

                        <option value="opt-1">Option 2</option>

                        <option value="opt-2">Option 3</option>

                    </select>
                    <span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>

                </div>

            </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>