信息和提示框

在以下情况下时，可使用信息和提示框：

• 提醒或警示
• 将访问者注意力吸引至某一处时
• 页面中重要的内容更新或变化

提醒或警示

使用说明

• 放在页面最顶部
• 简明扼要的书写警示内容
• 一个页面中最多放置 1 条警示内容
• 使用黄色背景突出内容的重要性

示例

<div class="panel bg-yellow">
    <h3>COVID-19 高感染风险</h3>
    坎卢普斯地区近两周的新冠肺炎确诊病例呈爆发式增长。请同学们：
    <ul>
        <li>减少前往人员密集区域</li>
        <li>做好个人卫生防护</li>
        <li>勤洗手、多通风</li>
        <li>如不幸感染，请联系 8-1-1</li>
    </ul>
</div>

警示横幅（或状态横幅）

使用说明

• 用于提示简短的非常重要的信息
• 用于提示简短的页面中的信息变化
• 出现在页面顶部
• 尽可能少量的使用警示横幅，因为使用的越多，其影响力越低

示例

[alert type="info"]用于提示时间敏感的信息[/alert]

[alert type="warning"]当有紧急事情时使用，例如服务中断、地点关闭、灾害警告或重要的政策变更[/alert]

[alert type="error"]当有系统错误或影响到生命健看安全的信息时使用[/alert]

[alert type="good"]提醒所有事项已完成[/alert]

重要文本段

重要内容标题

这里书写重要的内容文本。

[contextual]

重要内容标题

这里书写重要的内容文本。

[/contextual]

重要内容标题

这里书写重要的内容文本。

[contextual type="good"]

重要内容标题

这里书写重要的内容文本。

[/contextual]

重要内容标题

这里书写重要的内容文本。

[contextual type="warning"]

重要内容标题

这里书写重要的内容文本。

[/contextual]

重要内容标题

这里书写重要的内容文本。

[contextual type="danger"]

重要内容标题

这里书写重要的内容文本。

[/contextual]

突出信息

使用说明

• 可在页面顶部，页面中间任意位置或页面底部使用
• 用于突出信息，吸引注意力
• 可在页面中使用 2 – 3 次
• 可使用多种颜色

案例

<div class="panel bg-blue">
    <h3>学联会选举和年终总结报告会即将举办</h3>
    <ul>
        <li>2022 – 2023 学年度竞选将于3月7日晚6：00开始。</li>
        <li>2021 – 2022 学年度年终总结报告会暨 2022 – 2023 学年度学联会干部任命仪式将于3月14日晚6：00开始。</li>
    </ul>
    <a class="button" href="#">进一步了解</a>
</div>

<div class="panel bg-grey">
    <h3>学联会选举和年终总结报告会即将举办</h3>
    <ul>
        <li>2022 – 2023 学年度竞选将于3月7日晚6：00开始。</li>
        <li>2021 – 2022 学年度年终总结报告会暨 2022 – 2023 学年度学联会干部任命仪式将于3月14日晚6：00开始。</li>
    </ul>
    <a class="button" href="#">进一步了解</a>
</div>

<div class="panel bg-tru">
    <h3>学联会选举和年终总结报告会即将举办</h3>
    <ul>
        <li>2022 – 2023 学年度竞选将于3月7日晚6：00开始。</li>
        <li>2021 – 2022 学年度年终总结报告会暨 2022 – 2023 学年度学联会干部任命仪式将于3月14日晚6：00开始。</li>
    </ul>
    <a class="button" href="#">进一步了解</a>
</div>