Struttura
In questa sezione è presente il markup HTML principale necessario per la realizzazione della struttura di base per una pagina web SIL Sardegna.
Struttura di base e markup HTML di base
HEADER.it-header-wrapper
NAV.skiplinks
DIV.it-header-slim-wrapper
DIV.it-header-center-wrapper
DIV.it-header-navbar-wrapper
NAV[aria-label="Principale"]
MAIN[role="main"]
<!DOCTYPE html>
<html lang="it">
<!-- HEAD CONTENENTE LE INFO META, IL TITLE,
TUTTI GLI ASSET .CSS NECESSARI PER LA VISUALIZZAZIONE
CORRETTA DEL SITO, E ALCUNI FILE .JS -->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="msapplication-TileImage" content="/img/icon/favicon-24x24.png" />
<meta name="description" content="Sardegna Lavoro - Linee guida digitali e Design library" />
<title>Design System - SIL Sardegna</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" />
<link rel="stylesheet" href="/lib/bootstrap-italia/css/bootstrap-italia.min.css" media="all" />
<link rel="stylesheet" href="/css/style.min.css" media="all" />
<link rel="icon" href="/img/icon/favicon-24x24.png" sizes="24x24" />
<link rel="apple-touch-icon" href="/img/icon/favicon-24x24.png" />
<link rel="stylesheet" href="/lib/vanilla-calendar/vanilla-calendar.min.css" />
<script src="/lib/vanilla-calendar/vanilla-calendar.min.js"></script>
<link rel="stylesheet" href="/lib/jstable/jstable.css" />
<script src="/lib/jstable/jstable.min.js"></script>
</head>
<body class="monitor-web">
<div id="wrapper" class="wrapper">
<!-- HEADER. VEDERE ANCHE LA MACROCATEGORIA 'NAVIGATION',
QUINDI SEZIONE 'HEADER',
SELEZIONARE UNA VERSIONE TRA 'NOLOG' E 'LOG'. -->
<header class="it-header-wrapper" data-bs-toggle="sticky" data-bs-position-type="fixed" data-bs-sticky-class-name="is-sticky">
<!-- NAVIGAZIONE VELOCE PAGINA WEB 'SKIP LINKS' -->
<nav class="skiplinks" aria-label="Navigazione veloce alle sezioni principali del sito">
<ul>
<li><a class="visually-hidden-focusable" href="#main">Vai al contenuto principale</a></li>
<li><a class="visually-hidden-focusable" href="#footer">Vai al footer</a></li>
</ul>
</nav>
<!-- SLIM HEADER CHE MOSTRA ALCUNI LINK FUNZIONALI -->
<div class="it-header-slim-wrapper">
<div class="container-fluid container-custom">
<div class="it-header-slim-wrapper-content">
<div class="it-header-slim-left-zone-custom">
<a class="navbar-brand" href="https://www.regione.sardegna.it/" aria-label="Regione Autonoma della Sardegna - Collegamento al sito esterno">
<img src="/img/ras-gonfalone.svg" alt="Logo gonfalone della Regione Sardegna" />
<span class="it-brand-text">Regione Autonoma della Sardegna</span>
</a>
</div>
<div class="it-header-slim-right-zone">
<div class="it-access-top-wrapper">
<div class="user-avatar-custom">
<a href="/Login/SceltaMultiplaProfilo?cambioProfilo=True">
<span class="avatar" aria-hidden="true">F</span>
<span class="user-name-custom">Francesca Brugnera</span>
</a>
</div>
<div class="user-access-custom">
<a class="btn btn-icon has-icon-user-custom" href="#">
<span class="rounded-icon" aria-hidden="true">
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-user"></use>
</svg>
</span>
<span class="access-text-custom">Accedi all'area personale</span>
</a>
<a class="btn sign-out" href="/Login/DoLogout">Esci</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it-nav-wrapper">
<!-- SEZIONE CENTRALE DELL'HEADER CON L'INTESTAZIONE E IL LOGO -->
<div class="it-header-center-wrapper">
<div class="container-fluid container-custom">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<a href="#" title="Vai alla homepage">
<div class="it-brand-text">
<div class="it-brand-title"><strong>Monitor</strong> Web</div>
</div>
</a>
</div>
<div class="it-right-zone">
<div class="it-brand-wrapper">
<a href="https://www.regione.sardegna.it/" aria-label="Regione Autonoma della Sardegna - Collegamento al sito esterno">
<img src="/img/logo-ras.svg" alt="Logo della Regione Autonoma della Sardegna" />
</a>
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGAZIONE PRINCIPALE PORTALE -->
<div class="it-header-navbar-wrapper" id="headerNavWrapper">
<div class="container-fluid container-custom">
<div class="navbar">
<button class="custom-navbar-toggler" type="button" aria-controls="hasNav" aria-expanded="false" aria-label="Mostra/Nascondi la navigazione" data-bs-target="#hasNav" data-bs-toggle="navbarcollapsible">
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-burger"></use>
</svg>
</button>
<div class="navbar-collapsable-custom" id="hasNav">
<div class="overlay"></div>
<div class="close-div">
<button class="btn close-menu" type="button">
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-close-big"></use>
</svg>
<span>Chiudi Menu</span>
</button>
</div>
<div class="menu-wrapper">
<nav aria-label="Principale">
<div class="link-list-wrapper">
<!-- MENU / PRIMO LIVELLO / FIRSTLEVEL -->
<ul class="link-list">
<li class="list-header-custom"><a class="list-link has-icon-custom icon-back" href="#"><span>Homepage</span></a></li>
<li>
<div class="has-a-link-and-btn-collapse">
<a href="#" class="list-link">Pagina 1</a>
<button class="btn icon" href="#collapse_1" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse_1">
<span class="list-item-title-icon-wrapper">
<span class="visually-hidden">Espandi menu di navigazione</span>
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-expand">
</use>
</svg>
</span>
</button>
</div>
<ul class="link-sublist collapse" id="collapse_1">
<li><a class="list-link" href="#"><span>Pagina 1.1</span></a>
</li>
<li><a class="list-link" href="#"><span>Pagina 1.2</span></a>
</li>
<li><a class="list-link" href="#"><span>Pagina 1.3</span></a>
</li>
</ul>
</li>
<li>
<div class="has-a-link-and-btn-collapse">
<a href="#" class="list-link">Pagina 2</a>
<button class="btn icon" href="#collapse_2" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse_2">
<span class="list-item-title-icon-wrapper">
<span class="visually-hidden">Espandi menu di navigazione</span>
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-expand">
</use>
</svg>
</span>
</button>
</div>
<ul class="link-sublist collapse" id="collapse_2">
<li><a class="list-link" href="#"><span>Pagina 2.1</span></a>
</li>
<li>
<!-- SUB MENU / SUBLEVEL -->
<div class="has-a-link-and-btn-collapse">
<a href="#" class="list-link">Pagina 2.2</a>
<button class="btn icon" href="#collapse_2_2" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse_2_2">
<span class="list-item-title-icon-wrapper">
<span class="visually-hidden">Espandi menu di navigazione</span>
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-expand">
</use>
</svg>
</span>
</button>
</div>
<ul class="link-sublist collapse" id="collapse_2_2">
<li><a class="list-link" href="#"><span>Pagina 2.2.1</span></a></li>
<li><a class="list-link" href="#"><span>Pagina 2.2.2</span></a></li>
<li><a class="list-link" href="#"><span>Pagina 2.2.3</span></a></li>
</ul>
<!-- / SUB MENU / SUBLEVEL -->
</li>
<li><a class="list-link" href="#"><span>Pagina 2.3</span></a>
</li>
</ul>
</li>
<li>
<div class="has-a-link-and-btn-collapse">
<a href="#" class="list-link">Pagina 3</a>
<button class="btn icon" href="#collapse_3" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapse_3">
<span class="list-item-title-icon-wrapper">
<span class="visually-hidden">Espandi menu di navigazione</span>
<svg class="icon" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-expand">
</use>
</svg>
</span>
</button>
</div>
<ul class="link-sublist collapse" id="collapse_3">
<li><a class="list-link" href="#"><span>Pagina 3.1</span></a>
</li>
<li><a class="list-link link-external" href="#"><span>Link esterno 3.2</span><svg class="icon icon-sm align-right" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-external-link">
</use>
</svg></a></li>
<li><a class="list-link link-external" href="#"><span>Link esterno 3.3</span><svg class="icon icon-sm align-right" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-external-link">
</use>
</svg></a></li>
</ul>
</li>
<li>
<a href="#" class="list-link link-external">Link esterno 4 <svg class="icon icon-sm align-right" aria-hidden="true">
<use href="/lib/bootstrap-italia/svg/sprites.svg#it-external-link">
</use>
</svg>
</a>
</li>
</ul>
<!-- / MENU / PRIMO LIVELLO / FIRSTLEVEL -->
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- MAIN / BLOCCO CENTRALE DELLA PAGINA -->
<main id="main" class="main-content" role="main">
<div class="container-fluid container-custom">
<div class="row">
<div class="col-12">
<section>
<header class="article-header section-header">
<h1 class="title">Heading H1 / Titolo principale pagina web</h1>
</header>
<div class="row">
<div class="col-12">
<article>
<h2>Heading H2 / Sottotitolo pagina web</h2>
<p>Contenuto</p>
<ul>
<li>Contenuto</li>
<li>Contenuto</li>
<li>Contenuto</li>
</ul>
</article>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- FOOTER CON LE INFORMAZIONI SUL COPYRIGHT,
INFO & CONTATTI, LINK UTILI, ECC.
VEDERE ANCHE LA MACROCATEGORIA 'NAVIGATION', QUINDI SEZIONE 'FOOTER'. -->
<footer id="footer" class="it-footer">
<div class="it-footer-main">
<section class="footer-wrapper-custom has-brand-logo-custom">
<h3 class="visually-hidden">Sardegna Lavoro - Linee guida digitali e Design library</h3>
<div class="container">
<div class="row">
<div class="col-12">
<div class="it-brand-wrapper">
<div class="it-brand-logo">
<a href="#" aria-label="Vai alla Homepage di Sardegna Lavoro Monitor Web">
<img src="/img/logo.svg" class="img-fluid" alt="Logo Regione Sardegna" />
<div class="it-brand-text">
<div class="it-brand-title"><strong>Sardegna Lavoro</strong> Monitor Web </div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="footer-wrapper-custom">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<h4 class="footer-heading-title">Lorem ipsum</h4>
<dl>
<dt>Lorem ipsum dolor sit amet</dt>
<dd><a href="mailto:mail@domain.com">dolor sit amet</a></dd>
<dt class="visually-hidden">Lorem ipsum dolor sit amet</dt>
<dd>123.4567890<br>Lorem ipsum dolor sit amet</dd>
</dl>
<p><a href="#">Lorem ipsum dolor sit amet</a></p>
</div>
<div class="col-12 col-lg-4">
<h4 class="footer-heading-title">Lorem ipsum dolor</h4>
<div class="menu-rapid-link-container">
<ul class="menu">
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<h4 class="footer-heading-title">Lorem ipsum dolor</h4>
<div class="menu-external-link-container">
<ul class="menu">
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
<li class="menu-item menu-item-type-custom"><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="footer-wrapper-custom">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<h4 class="footer-heading-title">©2023 Regione Autonoma della Sardegna</h4>
</div>
<div class="col-12 col-lg-8">
<nav aria-label="Menu di navigazione secondario con link utili">
<ul class="list-footer-desktop-inline-custom">
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</nav>
</div>
</div>
</div>
</section>
</div>
</footer>
</div>
<!-- FILE .JS, LA LIBRERIA / FRAMEWORK 'BOOTSTRAP ITALIA',
E GLI ASSET NECESSARI PER IL FUNZIONAMENTO CORRETTO DEL SITO -->
<script type="text/javascript" src="/lib/bootstrap-italia/js/bootstrap-italia.bundle.min.js"></script>
<script>
window.__PUBLIC_PATH__ = "/lib/bootstrap-italia/fonts";
bootstrap.loadFonts(__PUBLIC_PATH__);
</script>
<script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/sil.bundle.min.js"></script>
</body>
</html>