Page Nouvelle Demande: Intro

Frame classes

The following classes need to be present on the sds-snetFrame element for styles to be rendered correctly:

  • -menuToggleVisible
<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 -form">
                                                    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 -form">
                                                    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 -form">
                                                    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 %}