SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information

Detail page with side nav

Sample display title

Sample page overview

<div class="sgds-masthead">
    <a href="https://www.gov.sg" target="_blank">
        <span class="sgds-icon sgds-icon-sg-crest"></span>
        <span class="is-text">A Singapore Government Agency Website</span>
    </a>
</div>
<nav class="sgds-navbar" role="navigation">
    <div class="sgds-navbar-brand">
        <a class="sgds-navbar-item">
            <img src="/assets/img/logo_sgds.svg" alt="Design System" />
        </a>
        <div class="sgds-navbar-burger" data-target="mainnav-1">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div id="mainnav-1" class="sgds-navbar-menu">
        <div class="sgds-navbar-start">
            <a class="sgds-navbar-item is-uppercase is-active is-tab">
                Who we are
            </a>
            <a class="sgds-navbar-item is-uppercase is-tab">
                Link 2
            </a>
            <a class="sgds-navbar-item is-uppercase is-tab">
                Link 3
            </a>
        </div>
        <div class="sgds-navbar-end">
            <a class="sgds-navbar-item is-uppercase is-tab">
                Link 4
            </a>
        </div>
    </div>
</nav>
<section class="sgds-section is-small has-background-light">
    <nav class="sgds-breadcrumb" aria-label="breadcrumbs">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">LINK 1</a></li>
            <li><a href="">LINK 2</a></li>
        </ul>
    </nav>
    <h1>Sample display title</h1>
</section>
<section class="sgds-section" style="height:40vh;">
    <div class="sgds-container">
        <div class="row">
            <div class="col is-2">
                <aside class="sgds-menu">
                    <ul class="sgds-menu-list">
                        <li><a class="is-active" href="#!">Level 2A</a></li>
                        <li><a href="#!">Level 2B</a></li>
                        <li><a href="#!">Level 2C</a></li>
                    </ul>
                </aside>
            </div>
            <div class="col is-offset-1">
                <h2>Sample page overview</h2>
            </div>
        </div>
    </div>
</section>
<footer class='sgds-footer'>
    <div class="top-section">
        <div class="sgds-container is-fluid">
            <div class="row">
                <div class="col">
                    <h5 class="has-text-white"><b>Singapore Government Design System</b></h5>
                </div>
            </div>
            <div class="row">
                <div class="col is-right-desktop-only">
                    <ul>
                        <li class="is-inline-block-desktop-only">
                            <p><a href="" target="_blank">Contact</a></p>
                        </li>
                        <li class="is-inline-block-desktop-only">
                            <p><a href="" target="_blank">Feedback</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-section">
        <div class="sgds-container is-fluid">
            <div class="row is-multiline">
                <div class="col is-12">
                    <ul>
                        <li>
                            <a href="https://tech.gov.sg/report_vulnerability" target="_blank">Report Vulnerability</a>
                        </li>
                        <li><a href="">Privacy</a></li>
                        <li><a href="">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="col is-12 has-text-right-desktop has-text-right-tablet has-text-left-mobile">
                    <p class="is-hidden-touch"> © 2021 Government of Singapore. Last Updated
                        12 Jul 2021</p>
                    <p class="is-hidden-desktop">© 2021 Government of Singapore</p>
                    <p class="is-hidden-desktop last-updated">Last Updated 12 Jul 2021</p>
                </div>
            </div>
        </div>
    </div>
</footer>

Looking for components documentation?

Visit components