Solution Page Design Guideline


The general guidelines for soluiton page, please scroll down to learn more about how to start or download the templates

Download Template
 

General Guideline

Please refer to the Webpage Checklist for general principles of official website layout.

官網版型通用原則請參考 Webpage Checklist

Layout Guideline

  • 1. All section block width should be 1200px for PC, 768px for tablets, and 580px for mobile devices.
  • 2. Text only block's width should be set to 820px and aligned in the center
  • 3. Key Visual (KV)should use the template,and the final size should be 1920px X 450px
  • 4. Webpage title is defined as H1 (44px for PC/tablet, 36px for mobile), check below section for font size
  • 5. Section title is defined as H2 (36px for PC/tablet, 26px for mobile), check below section for font size
  • 6. Resource should be the last section on the page, and it's non-editable
Solution Page Demo

Layout Guideline as Marked

KV

Resource should be the last section

Key Visual Guidelines - PC & Mobile

Please refer to the Video KV page for general guideline

請參考Video KV page 並依據說明準備影片素材及規格.

KV

Navbar

Navbars items indicates anchors to each content block

腰帶選單裡的項目是該頁內容各區塊錨點

NavBar

Default

Narbar will fixed on top of the page and showing the site title

當頁面往下划動時,腰帶選單會置頂在當頁上方並出現網頁名稱

NavBar

Fixed Top

Section Title

Section Title
  • 1. Font Size: 36px/ PC 26px / Mobile
  • 2. Font weight: Bold / 700
  • 3. Font color: #000000 / Black
 

Related Resources

Card list

Key Visual

Can simultaneously showcase text, background images, or videos in a section. With multiple assets, a carousel effect will be demonstrated.

Read More
Solution Portal Key Visual Guidelines

Navbar

The navbar will stick to the top when you reach its scroll position

Read More
card

Card

The Card provides a flexible and extensible content container with multiple variants and options

Read More