The following classes need to be present on the sds-snetFrame element for styles to be rendered correctly:
<div class="sds-snetFrame -noMenu">
<a href="#frameMain" class="sds-skipNavLink">
Skip to content
</a>
<header class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav class="sds-navTopbar__inner navbar navbar-expand">
<a href="#back" class="sds-navTopbar__back">
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevronleft"></span>
</span>
<span class="sds-textHelper sds-navTopbar__backText">Accueil</span>
</a>
<a class="sds-navTopbar__logo navbar-brand" href="#">
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
</a>
<div class="sds-navTopbar__centeredContent sds-navTopbar__dropdownWrapper dropdown sds-textHelper">
<span>Ouvrir une nouvelle entité</span>
</div>
<div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
<ul class="sds-navTopbar__content navbar-nav">
<li class="sds-navTopbar__item sds-navTopbar__dropdownWrapper dropdown">
<button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
<span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label with Name</span>
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<main class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-md-11 col-xl-9">
<div class="sds-stackXl">
<header class="sds-stackXs">
<h2 class="h2">Informations entitée</h2>
<p class="sds-textBodyLg">Please provide the requested information</p>
</header>
<div class="sds-box -insetLg">
<div class="row row-sm">
<div class="col-12 col-md-6">
<div class="form-group">
<label for="nvl-demande-entite" class="sds-label -labelForm">
Entité
</label>
<div class="sds-input">
<input id="nvl-demande-entite" class="sds-input form-control" type="text" placeholder="{Placeholder}" value="">
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label for="nvl-demande-groupe" class="sds-label -labelForm">
Groupe
</label>
<div class="sds-input">
<input id="nvl-demande-groupe" class="sds-input form-control" type="text" placeholder="{Placeholder}" value="">
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label for="nvl-demande-ref" class="sds-label -labelForm">
Référence
</label>
<div class="sds-input">
<input id="nvl-demande-ref" class="sds-input form-control" type="text" placeholder="{Placeholder}" value="123456" readonly>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-frameContentBottomBar -isActive">
<div class="sds-frameContentBottomBar__container container">
<div class="sds-frameContentBottomBar__alignEnd sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Annuler</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Dupliquer</span>
</button>
</div>
</div>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@cpb-frame" %}
{% block panelMainContent %}
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-md-11 col-xl-9">
<div class="{{ namespace }}stackXl">
<header class="{{ namespace }}stackXs">
<h2 class="h2">Informations entitée</h2>
<p class="{{ namespace }}textBodyLg">Please provide the requested information</p>
</header>
<div class="{{ namespace }}box -insetLg">
<div class="row row-sm">
<div class="col-12 col-md-6">
<div class="form-group">
{% render "@label--form",{
text: "Entité",
labelFor: "nvl-demande-entite"
},true %}
{% render "@input",{
placeholder: "{Placeholder}",
id: "nvl-demande-entite"
},true %}
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
{% render "@label--form",{
text: "Groupe",
labelFor: "nvl-demande-groupe"
},true %}
{% render "@input",{
placeholder: "{Placeholder}",
id: "nvl-demande-groupe"
},true %}
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
{% render "@label--form",{
text: "Référence",
labelFor: "nvl-demande-ref"
},true %}
{% render "@input",{
readonly: true,
placeholder: "{Placeholder}",
value: "123456",
id: "nvl-demande-ref"
},true %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@cpb-frame-content-bottom-bar--default",{
frameContentBottomBarBtn1Options: {
text: "Annuler"
},
btn2Text: "Dupliquer",
classes: ["-isActive"]
},true %}
{% endblock %}