No notes defined.
<div class="sds-modal modal fade -hasHeaderStepper -bodySecondary06" id="" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="d-flex align-items-center">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__back">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
<div class="sds-modal__title modal-title">Veuillez choisir une frame</div>
</div>
<div class="sds-modal__headerStepper">
<nav class="sds-mobileStepper -secondary">
<ul class="sds-mobileStepper__inner list-unstyled">
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-current="true"></div>
</div>
</li>
</ul>
</nav>
</div>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="row row-sm row-cols-2 row-cols-md-3 align-items-stretch-immediate">
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Twitter post</div>
<div style="color: #4d6e90">1024 x 512 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Instagram post</div>
<div style="color: #4d6e90">1080 x 566 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Linkedin post</div>
<div style="color: #4d6e90">1200 x 627 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Facebook post</div>
<div style="color: #4d6e90">1200 x 630 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Digital Signage</div>
<div style="color: #4d6e90">1920 x 1080 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Facebook Event Image</div>
<div style="color: #4d6e90">1920 x 1080 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Facebook Event Image</div>
<div style="color: #4d6e90">1920 x 1080 px</div>
</div>
</div>
</div>
<div class="col">
<div style="
background-color: #ffffff;
padding: 16px;
border: 2px solid #b2c1cf;
border-radius: 16px;
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: #e5eaef;"></div>
<div class="sds-stackXs" style="margin-top: 32px">
<div>Facebook Event Image</div>
<div style="color: #4d6e90">1920 x 1080 px</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="d-flex align-items-center">
{% render "@icon-btn-secondary--ghost", {
classes: [namespace + "modal__back"],
icon: "icon-arrowprevious"
},true %}
<div class="{{ namespace }}modal__title modal-title">{{ title }}</div>
</div>
<div class="{{ namespace }}modal__headerStepper">
{% render "@msp-stepper",stepperOptions,true %}
</div>
{% endblock %}
{% block body %}
<div class="row row-sm row-cols-2 row-cols-md-3 align-items-stretch-immediate">
{% for key, item in cards %}
<div class="col">
<div style="
background-color: {{ colorTokens.color.gray["0"].value }};
padding: {{ spacerTokens.spacer.unit["16"].value }};
border: {{ spacerTokens.spacer.unit["2"].value }} solid {{ colorTokens.color.brand.secondary["30"].value }};
border-radius: {{ radiusTokens.radius["16"].value }};
">
<div class="canvas-zone d-flex align-items-center justify-content-center" style="aspect-ratio: 16 / 9; background-color: {{ colorTokens.color.brand.secondary["10"].value }};"></div>
<div class="{{ namespace }}stackXs" style="margin-top: {{ spacerTokens.spacer.unit["32"].value }}">
<div>{{ item.title }}</div>
<div style="color: {{ colorTokens.color.brand.secondary["60"].value }}">{{ item.subtitle }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}