頁首 (Header)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

基本頁首

頁首包含網站 logo、導覽列，幫助使用者快速了解網站內容和瀏覽不同頁面。

HTML

<header class="headerfordemo" data-module="header">
    <div class="header-top">
        <div class="width-container header-top-container">
            <div class="header-actions">
                <a href="#" class="header-link small-text">網站導覽</a>
                <a href="#" class="header-link small-text" lang="zh-TW">中文</a>
                <a href="#" class="header-link small-text" lang="en">英文</a>
            </div>
        </div>
    </div>
    <div class="header-divider width-container"></div>
    <div class="header-bottom">
        <div class="width-container">
            <div class="header-logo">
                <a href="#" class="header-link">
                    <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype">
                </a>
            </div>
        </div>
    </div>
</header>

頁首與導覽列

HTML

<header class="headerfordemo" data-module="header">
    <div class="header-top">
        <div class="width-container header-top-container">
            <div class="header-actions">
                <a href="#" class="header-link small-text">網站導覽</a>
                <a href="#" class="header-link small-text" lang="zh-TW">中文</a>
                <a href="#" class="header-link small-text" lang="en">英文</a>
            </div>
        </div>
    </div>
    <div class="header-divider width-container"></div>
    <div class="header-bottom">
        <div class="width-container header-container">
            <div class="header-logo">
                <a href="#" class="header-link">
                    <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype">
                </a>
            </div>
            <button class="header-menu-button" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation">≡</button>
            <div class="header-content">
                    <a href="#" class="header-link service-name">Service name 1 </a>
                    <a href="#" class="header-link service-name">Service name 2 </a>
                    <a href="#" class="header-link service-name">Service name 3 </a>
                <!-- Additional links for mobile view -->
                <div class="header-additional-links">
                    <div class="header-divider width-container"></div>
                    <div class="header-actions-row">
                        <a href="#" class="header-link small-text">網站導覽</a>
                        <a href="#" class="header-link small-text">中文</a>
                        <a href="#" class="header-link small-text">英文</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>