# HUB
Page assembly built on `@snet-page-frame--no-menu` and `@card-login`. The variants show Business discovery and activated states, with optional Easy Link and Triple A cards.
`hub.config.js` supplies the card content for each view. Personal and company accounts use `@list-item-group--contained`; service actions use `@snet-list-item--avatar-chevron` with the existing date icon. Card bodies can render any registered components through `bodyComponents`, an ordered array of `{ handle, context }`. Write handles without `@`, for example `list-item-group--contained`; the card template adds it when rendering.
<div class="sds-snetFrame -noMenu">
<nav role="navigation">
<ul class="list-unstyled">
<li>
<a href="#frameMain" class="sds-skipNavigation sds-box -boxInsetMd sds-scaleInteraction text-underline">
Skip to content
</a>
</li>
</ul>
</nav>
<header role="banner" class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
<div class="sds-navTopbar__alignToMainContent">
<a class="sds-navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
</a>
</div>
<div class="sds-navTopbar__meta sds-textHelper">
<span>S-Net Privé</span>
<span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</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">
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-navTopbar__btn">
<span aria-hidden="true" class="sds-icon sds-icon-logout"></span>
<span class="sr-only">Se déconnecter</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<main role="main" class="sds-snetFrame__main" id="frameMain">
<div class="sds-snetFrame__mainContent">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-10 col-xxl-8 sds-stackXxl">
<h1 class="text-center sds-fontBase">Bonjour <span>Jil,</span> <br>que souhaitez-vous faire aujourd’hui ?</h1>
<div class="row align-items-stretch-immediate">
<div class="col-12 col-md-6">
<div class="sds-cardLogin sds-box -boxInsetlg">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">S-Net Privé</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes comptes personnels</p>
</div>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<ul class="sds-listItemGroup list-unstyled">
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/jil-schmit-hub.jpg" alt="">
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Jil Schmit</h4>
<p class="sds-listItem__textMeta sds-textHelper">1234566</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
<li class="sds-listItemGroup__item">
<a href="#!" class="sds-listItem sds-hoverContentSecondary -avatarChevron">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">LI</div>
</div>
<div class="sds-listItem__text sds-staticStackXs">
<h4 class="sds-listItem__textMain sds-fontBase sds-textSemiBold">Lorem Ipsum</h4>
<p class="sds-listItem__textMeta sds-textHelper">12345682</p>
</div>
<div class="sds-listItem__rightContent">
<span class="sds-iconCircle sds-hoverContentSecondary__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronright"></span>
</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="sds-cardLogin sds-box -boxInsetlg -cardLoginBfm">
<div class="sds-cardLogin__header">
<div class="sds-media -mediaMd">
<img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-openaccountb.svg" alt="">
</div>
<div class="flex-grow-1 d-flex flex-column flex-md-row flex-md-wrap justify-content-between align-items-start align-items-md-center sds-staticGapSm">
<div class="sds-cardLogin__headerContent flex-grow-1 d-flex flex-column sds-staticGapXxs">
<h3 class="sds-cardLogin__headerTitle sds-fontBase sds-colorInherit sds-textSemiBold">S-Net Business</h3>
<p class="sds-cardLogin__headerText sds-textHelper">Mes comptes professionnels</p>
</div>
<span class="sds-badge badge -badgeHighlight text-uppercase flex-shrink-0 sds-cardLogin__headerBadge">
Nouveau
</span>
</div>
</div>
<div class="sds-cardLogin__body sds-staticGapLg">
<div class="sds-alertBanner alert -alertBannerHighlight">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-lightbulb"></span>
</span>
<div class="sds-alertBanner__text sds-staticStackXs">
<p class="sds-textHelper">Saviez-vous que vous pouvez gérer les virements de <strong>{nom de l’entreprise}</strong> directement depuis S-Net Business, sans passer par votre compte personnel ?</p>
</div>
</div>
<ul class="sds-staticStackMd list-unstyled">
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Gérez les accès, créez des droits personnalisés pour vous et vos collaborateurs.</p>
</li>
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Facilitez la gestion administrative, générez des documents et relevés spécifiques pour votre société.</p>
</li>
<li class="d-flex align-items-start sds-staticGapSm">
<span class="sds-icon sds-icon-check-l sds-headingColor flex-shrink-0" aria-hidden="true"></span>
<p>Multi-entités, toutes vos sociétés en un seul espace, sans vous déconnecter.</p>
</li>
</ul>
</div>
<div class="sds-cardLogin__footer sds-staticGapSm">
<button type="button" class="sds-btn -btnPrimary" data-toggle="modal" data-target="#hubActivationModal">
<span class="sds-btn__text">
Activer S-Net Business
</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">
En savoir plus à propos de S-Net Business
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-modal modal fade -bodySecondary06" id="hubActivationModal" aria-labelledby="hubActivationModalTitle" aria-modal="true" role="dialog" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-md modal-dialog-centered modal-dialog-scrollable">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<h2 class="sds-modal__title modal-title" id="hubActivationModalTitle">Sociétés à activer sur S-Net Business</h2>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Fermer">
<span aria-hidden="true" class="sds-icon sds-icon-close"></span>
<span class="sr-only">Action text</span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-box -boxInsetMd sds-staticStackMd">
<div class="sds-emptyState text-center">
<img class="sds-emptyState__media" src="../../media/illustrative-icons/sdsillu-earthglobegrey.svg" alt="" />
<div class="sds-emptyState__textBlock">
<h3 class="h4 sds-emptyState__text sds-colorInherit">
Aucune équipe assignée
</h3>
<p class="sds-emptyState__text sds-textSemiBold">L’utilisateur n’est assigné à aucune équipe pour l’instant.</p>
<div class="sds-brandLine -isDisabled"></div>
</div>
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">
Assigner équipes
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>