category-分栏式布局将两个容器并排陈列--default
title-其宽度比例是基于网格系统---button default
body-叠层式布局允许两个容器（如前景与背景）互相交叠
disclaimer-每个 variant 有分别对应的 span 可以选择
show
http://www.baidu.com
button
learn more test
3
inner
darkpopup01
default
测试innerpage
L4--nested-block--text-block
style
l4customsection-section
sectionId
id1
lg:justify-center
md:justify-center
sm:justify-center
on
section-light
text
hide
top text-組合出所需的內容結構
show
bottom text-此元件由多個可選的內容元素垂直堆疊而成
300px
200px
100px
text
highlight text-此元件的所有文字欄位都是可隱藏的
hide
top text-組合出所需的內容結構
show
bottom text-此元件由多個可選的內容元素垂直堆疊而成
300px
200px
100px
text
highlight text-此元件的所有文字欄位都是可隱藏的
show
top text-組合出所需的內容結構
show
bottom text-此元件由多個可選的內容元素垂直堆疊而成
400px
200px
100px
style
l4customsection-section
sectionId
id2
video
30 30 50 50
true
false
true
bottom-right
true
dark
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
%
60
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
%
100
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
%
100
inFlow
inFlow
inFlow
Play
Pause
Replay
L4--nested-block--media-block
video
30 30 50 50
true
false
true
bottom-right
true
dark
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
%
60
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
%
100
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
%
100
inFlow
inFlow
inFlow
Play
Pause
Replay
L4--nested-block--media-block
style
l4customsection-section
sectionId
id5
Layoutstyle1+tabstyle1
no
/content/asus-l4/language-master/en/components/sy-test/all-components/fragmentbysy
test

L4TagMulti-subItemText

tabtest

L4TagMulti-subItemIconAsset

L4TagMulti-subItemFragmentUrl

/content/asus-l4/language-master/en/components/id-8-tab/dev/fragmentbysy

Lorengbrix dolor2
no
/content/asus-l4/language-master/en/components/sy-test/all-components/fragmentbysy1
Lorengbrix dolor3
no
/content/asus-l4/language-master/en/components/sy-test/all-components/fragmentbysy
Lorengbrix dolor4
no
/content/asus-l4/language-master/en/components/sy-test/all-components/fragmentbysy1
Lorengbrix dolor5
no
/content/asus-l4/language-master/en/components/sy-test/all-components/fragmentbysy
Lorengbrix dolor6
no
/content/asus-l4/language-master/en/components/id-8-tab/dev/fragment2
Lorengbrix dolor7
no
/content/asus-l4/language-master/en/components/id-8-tab/dev/fragment2
Lorengbrix dolor8
no
/content/asus-l4/language-master/en/components/id-8-tab/dev/fragment2
Lorengbrix dolor9
no
/content/asus-l4/language-master/en/components/id-8-tab/dev/fragment2
Lorengbrix dolor10
no
/content/asus-l4/language-master/en/components/id-8-tab/dev/fragment2
style
l4customsection-tab-navigator
layoutStyle
1
tabStyle
1
showIcon
true
tabSelectedColor
FF0000,0000FF
tabFontColorSelect
FF0000,0000FF
tabFontD1
md-24-lg
tabFontT1
md-20-sh-md
tabFontM1
md-20-sh-sm
prevTabLabel
Previous tab
nextTabLabel
Next tab
sectionId
3453
lg:items-center
off
left
center
center
ID12测试
属性与定制化
用户可以设置图表中主要区块（如项目文字区（item text）、长条图区（bar）、指示器（arrow & num）区）的相对宽度百分比（%），从而自由组合出适配不同数据长度与视觉重点的图表布局。
动态数量：用户可自由新增数据列，决定所需的数据列数量
on
md-32-lg
open in a new tab
open in a new tab
L4--nested-block--text-block
image
true
default
image-one
auto
inFlow
inFlow
inFlow
Play
Pause
Replay
L4--nested-block--media-block
style
l4customsection-container-2cols
dLayoutVariation
1
dColSpan1
6:6
dColSpan2
7:6
sectionId
id12
left
left
left
img_txt_integrated_top
svg
FF0000,0000FF
FF0000,0000FF
FF0000,0000FF
svg
FF0000,0000FF
FF0000,0000FF
FF0000,0000FF
20
opens in a new tab
Jump to
section
Play
Pause
Replay
Previous slide
Next slide
Play the simulated home sounds without noise cancelation.
(Baby crying and dog barking) Flip the switch below this test recording to enable or disable the ASUS AI Noise Canceling Technology and experience its power and accuracy for yourself.
AI noise cancelation
Title3453511
Description
show
text-link
external
linear-gradient(90deg, rgba(250, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%)
noise_canceling
FF0000,0000FF
FF0000,0000FF
ASUS Vivobook S16 (S3607Q) Review-variant1
StoryCube is an AI-powered digital asset-management tool,which can automatically organize your photos and videos.
show
button
FF0000,0000FF
true
id2
image
ASUS Vivobook S16 (S3607Q) Review12
Explore the ASUS Vivobook S16 (S3607Q),
show
button
true
id2
video
true
true
true
top-right
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
video test
card info
video
/content/dam/asus-l4/components-test-for-addobe/video-test.mp4
ASUS Vivobook S16 (S3607Q) Review1
Explore the ASUS Vivobook S16 (S3607Q),
show
true
id3
noise_canceling
226bae
FF0000
FF0000
/content/dam/asus-l4/dev/components/id-5-media-block/ID18_motion_reference.mp4
ASUS Vivobook S16 (S3607Q) Review1
Explore the ASUS Vivobook S16 (S3607Q),
show
noise_canceling
/content/dam/aem-ue-editor/content-at-scale.png
title test
card info
video
/content/dam/asus-l4/components-test-for-addobe/ROG8.mp4
style
l4customsection-section
sectionId
id1
2
Performance comparison-Variant2 test
*Tests conducted by ASUS in January 2025. Test configuration: ASUS Zenbook A14 (UX3407), FHD OLED panel, Snapdragon ®X processor, 1TB SSD, 32 GB RAM, 70Wh battery ; Apple MacBook Air 15 M2, 256GB SSD, 8 GB RAM, 66.5Wh battery; Apple MacBook Air 13 M3, 512GB SSD, 16 GB SSD, 52.6Wh battery.

L4TagMulti-barRowItemText

Zenbook A14 (UX3407) Snapdragon X Elite-Row2

L4TagMulti-barRowBarText

bar text1

L4TagMulti-barRowTextColor

L4TagMulti-barRowLength

50

L4TagMulti-barRowColor

L4TagMulti-barRowItemText

Zenbook A14 (UX3407) Snapdragon X Elite-Row1

L4TagMulti-barRowBarText

text

L4TagMulti-barRowTextColor

L4TagMulti-barRowLength

100

L4TagMulti-barRowColor

L4TagMulti-barRowItemText

Zenbook A14 (UX3407) -Row3

L4TagMulti-barRowBarText

text

L4TagMulti-barRowTextColor

L4TagMulti-barRowLength

100

L4TagMulti-barRowColor

L4TagMulti-barRowItemText

1212

L4TagMulti-barRowBarText

L4TagMulti-barRowTextColor

L4TagMulti-barRowLength

50

L4TagMulti-barRowColor

L4TagMulti-barRowItemText

123

L4TagMulti-barRowBarText

L4TagMulti-barRowTextColor

L4TagMulti-barRowLength

60

L4TagMulti-barRowColor

on
30%
Arrow test
svg
0000FF
L4--nested-block--bar-chart
style
l4customsection-section
sectionId
id14test
PowerPoint
video
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
Transform Data into Decisions
Analyze data with ease — Copilot suggests formulas, creates charts, and provides insights, helping you spot trends and make informed decisions faster.
true
default
true
default
/content/dam/aem-ue-editor/hero.png
L4--nested-block--media-block
outlook
video
/content/dam/asus-l4/components-test-for-addobe/tab02_video.mp4
Transform Data into Decisions-2
Analyze data with ease — Copilot suggests formulas, creates charts, and provides insights, helping you spot trends and make informed decisions faster-2.
true
default
image
true
default
/content/dam/aem-ue-editor/low-code-way-to-developer-productivity.png
auto
L4--nested-block--media-block
Excel
image
Transform Data into Decisions - 3
Analyze data with ease — Copilot suggests formulas, creates charts, and provides insights, helping you spot trends and make informed decisions faster. - 3
true
default
image
true
default
/content/dam/asus-cto/backup/widen-the-talent-pool.png
L4--nested-block--media-block
Word
video
/content/dam/asus-l4/components-test-for-addobe/ROG8.mp4
word title
word info
true
default
image
/content/dam/aem-ue-editor/peak-performance.png
L4--nested-block--media-block
style
l4customsection-tab-3column
motionEnabled
true
tabIconEnabled
true
prevTabLabel
Previous tab
nextTabLabel
Next tab
playLabel
Play
pauseLabel
Pause
replayLabel
Replay
image
1
1
1
title-用户可以随时点击任何一个非启用的圆点来手动切换卡片--Cardlayout1测试
info--当手动切换发生时，自动播放的计时器会被重置，新的启用圆点会转变为进度条并从 0% 重新开始填充
show
button
Learn more
http://www.baidu.com
2
inner
id2-fragment
000000,0000FF
Play
Pause
Replay
opens in a new tab
AI noise cancelation
image
true
2
2
2
FFFF00
slogen-若选择影片会出现影片按钮的控制选项包含
title-用户可以随时点击任何一个非启用的圆点来手动切换卡片--Cardlayout2测试
info-当手动切换发生时，自动播放的计时器会被重置，新的启用圆点会转变为进度条并从 0% 重新开始填充
show
button
Play
Pause
Replay
opens in a new tab
AI noise cancelation
image
3
1
1
slogen-若选择影片会出现影片按钮的控制选项包含
title-用户可以随时点击任何一个非启用的圆点来手动切换卡片---Cardlayout3测试
info-当手动切换发生时，自动播放的计时器会被重置，新的启用圆点会转变为进度条并从 0% 重新开始填充
show
button
Play
Pause
Replay
opens in a new tab
AI noise cancelation
image
4
2
2
slogen-若选择影片会出现影片按钮的控制选项包含
title-用户可以随时点击任何一个非启用的圆点来手动切换卡片--Cardlayout4测试
info-当手动切换发生时，自动播放的计时器会被重置，新的启用圆点会转变为进度条并从 0% 重新开始填充
show
button
Play
Pause
Replay
opens in a new tab
AI noise cancelation
video
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
false
true
true
4
2
2
slogen-若选择影片会出现影片按钮的控制选项包含
title-用户可以随时点击任何一个非启用的圆点来手动切换卡片
info-当手动切换发生时，自动播放的计时器会被重置，新的启用圆点会转变为进度条并从 0% 重新开始填充
show
button
Play
Pause
Replay
opens in a new tab
AI noise cancelation
noise-canceling
image alt text
/content/dam/asus-l4/dev/components/id-16-largecard-carousel/Battery_ID16-assets/CIRCLE~4.MP4
/content/dam/asus-l4/dev/components/id-16-largecard-carousel/Battery_ID16-assets/CIEBE3~1.MP4
/content/dam/asus-l4/dev/components/id-16-largecard-carousel/Battery_ID16-assets/CI878C~1.MP4
true
true
dark
OFF1
ff0000
ffff00
tab 4
2
2
2
2
1
1
AIN title
Truly personalized workflow
show
text-link
learn more
https://www.hexcolortool.com/#0d0ab2
Play
Pause
Replay
opens in a new tab
AI noise cancelation
style
l4customsection-large-card-carousel
layoutGroup
1
layoutAutoPlay
no
cardStyleTitleFontD
bd-32-lg
carouselPlayLabel
Play carousel
carouselPauseLabel
Pause carousel
carouselPaginationLabel
Carousel pagination
carouselSlideLabel
Slide
carouselSlideOfLabel
of
carouselPrevIndicatorsLabel
Previous indicators
carouselNextIndicatorsLabel
Next indicators
colorGroup
section-light
sectionId
67868
left
left
left
img_txt_separate_bottom
svg
FF0000,0000FF
FFFF00,0000FF
FF0000,0000FF
FF0000,0000FF
10
Previous slide
Next slide
opens in a new tab
Jump to
section
Play
Pause
Replay
Play the simulated home sounds without noise cancelation.
(Baby crying and dog barking) Flip the switch below this test recording to enable or disable the ASUS AI Noise Canceling Technology and experience its power and accuracy for yourself.
AI noise cancelation
ASUS Vivobook S16 S3607Q laptop1
The ASUS Vivobook S16 S3607Q features a Snapdragon
show
button
linear-gradient(90deg, rgba(250, 0, 0, 1) 0%, rgba(0, 0, 255, 1) 100%)
4
10 10 10 10
image
Features Snapdragon processor, OLED display1
ASUS Vivobook S16 S3607Q laptop with Snapdragon AI performance
show
button
5
10 10 10 10
noise_canceling
FF0000,0000FF
FF0000,0000FF
FF0000,0000FF
Features Snapdragon processor, OLED display
ASUS Vivobook S16 S3607Q laptop with Snapdragon AI performance
show
button
6
10 10 10 10
noise_canceling
Features Snapdragon processor, OLED display
video
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
style
l4customsection-section
sectionId
Section-variant1

First level Accordion 1

subtitle level 1

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
image
true
default
Play
Pause
Replay
First Level Accordion 2
subtitle-测试测试测试
image
true
default
Play
Pause
Replay
Nested Accordion 1
subtitle level 2
info level 2 lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
./media-block-fragment
Nested Accordion 2
subtitle level 2
info level 2 lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
./media-block-fragment
First level Accordion 3
subtitle level 1
info level 1 lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
video
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
true
default
Play
Pause
Replay
style
feature-accordion
menuLayerType
single
ctaVisiblity
show
ctaText
Learn more about
ctaHyperlink
https://www.google.com/
ctaFontColor
FF0000,0000FF
expandLabel
Expand
collapseLabel
Collapse
sectionId
ID18-test
svg
FF0000
0000FF
FFFF00
00008B
87CEEB
4169E1
2
Jump to
section
Play
Pause
Replay
section-dark
icon
lg:col-span-6
md:col-span-6
right
right
right
right
lg:row-span-1
title-Story Cube-icon style-6column
one-stop AI media hub
lg:text-left
true
Section-text style
off
external
http://www.baidu.com
icon
lg:col-span-6
md:col-span-6
top
right
right
lg:row-span-1
title-Story Cube-icon style-6column
one-stop AI media hub
lg:text-left
true
Section-text style
on
inner
http://www.baidu.com
inner-page01
icon
lg:col-span-4
md:col-span-6
top
right
right
lg:row-span-1
title-Story Cube-icon style-6column
one-stop AI media hub
lg:text-left
true
Section-text style
on
inner
http://www.baidu.com
inner-page01
icon
lg:col-span-4
md:col-span-6
bottom
right
right
lg:row-span-1
FF0000,0000FF
title-Story Cube-icon style-6column
one-stop AI media hub
lg:text-left
true
Section-text style
on
inner
http://www.baidu.com
inner-page01
style
l4customsection-section
sectionId
Section-icon style
FF0000,0000FF
show
true
md-18
FF0000,0000FF
25
25
High-performance parts1
High-performance parts
The G700 is built from the ground up with high-quality components and designed by the incredible people that make ROG the best brand in gaming.
跳转到media测试
section-id5
High-performance parts2
High-performance parts
The G700 is built from the ground up with high-quality components and designed by the incredible people that make ROG the best brand in gaming.
Learn more about xxx
media01
High-performance parts3
High-performance parts
The G700 is built from the ground up with high-quality components and designed by the incredible people that make ROG the best brand in gaming.
Learn more about xxx
media01
High-performance parts3
High-performance parts
The G700 is built from the ground up with high-quality components and designed by the incredible people that make ROG the best brand in gaming.
Learn more about xxx
media01
true
default
/content/dam/aem-ue-editor/content-at-scale.png
L4--nested-block--media-block
style
l4customsection-section
sectionId
Section-new
1
true
Title-static mode
info-static info
Title-breathing
Info-breathing
Lighting Modes
Play
Pause
Hue
Saturation and Brightness
section-light
style
l4customsection-section
sectionId
id41
2
section-light
default -cara

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

这个元件是一个多栏式图表模块

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-3

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-4

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-5

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-6

off

Media and

Entertainment Media

wrap line off

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC 1

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

这个元件是一个多栏式图表模块 2

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-3

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-4

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-6

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE ILLUSTRATOR CC-5

off
Media and Entertainment

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE IL

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

ADOBE IL

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

CC-3

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

CC-5

L4TagMulti-iconAssets

L4TagMulti-infoRichtext

CC-4

on
style
l4customsection-section
sectionId
ID69TEST
image
alt
leftTop
true
id2

Title-More secure-Default title

ASUS Copilot+ PC elevates every moment. Staying organized and connected is always at ease
show
button
Learn more about xxxxxxx
http://www.baidu.com
2
svg
external
http://www.baidu.com
FF0000,0000FF
Play
Pause
Replay
opens in a new tab
Jump to
section
AI noise cancelation
video
/content/dam/asus-l4/components-test-for-addobe/ID18_motion_reference.mp4
false
leftBottom
Title-More secure
ASUS Copilot+ PC elevates every moment. Staying organized and connected is always at ease
show
text-link
Learn more about xxxxxxx
http://www.google.com
Play
Pause
Replay
opens in a new tab
Jump to
section
AI noise cancelation
noise-canceling
/content/dam/asus-l4/dev/components/id-13-small-card-block/noise-nobg.png
FF0000
FF0000
Title-More secure
ASUS Copilot+ PC elevates every moment. Staying organized and connected is always at ease
show
text-link
Learn more about xxxxxxx
Play
Pause
Replay
opens in a new tab
Jump to
section
AI noise cancelation
image
alt 2
left
Title-More secure
ASUS Copilot+ PC elevates every moment. Staying organized and connected is always at ease
show
text-link
Learn more about xxxxxxx
http://www.google.com
Play
Pause
Replay
opens in a new tab
Jump to
section
AI noise cancelation
image
alt 3
top
Title-More secure
ASUS Copilot+ PC elevates every moment. Staying organized and connected is always at ease
show
text-link
Learn more about xxxxxxx
http://www.google.com
Play
Pause
Replay
opens in a new tab
Jump to
section
AI noise cancelation
style
l4customsection-highlight-carousel
layoutMotion
on
layoutAutoplay
no
layoutImgDelay
9
anchorStyle
svg
infoAdvancedFontDT
rg-24-lg rg-24-md
carouselPlayLabel
Play carousel
carouselPauseLabel
Pause carousel
carouselPaginationLabel
Carousel pagination
carouselSlideLabel
Slide
carouselSlideOfLabel
of
anchorAriaPrefix
Jump to
anchorAriaSuffix
section
sectionId
id181
1
btn-variant1
L4--nested-block--btn
2
btn-variant2
L4--nested-block--btn
3
btn-variant3
L4--nested-block--btn
4
btn-variant4
2
L4--nested-block--btn
5
btn-variant5
L4--nested-block--btn
6
btn-variant6
10
20
30
40
L4--nested-block--btn
6
btn-variant1+fonttest
md-16-lg
open in a new tab
section-light
L4--nested-block--btn
style
l4customsection-section
sectionId
id6
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance may vary in real-world situations.Unless otherwise stated, data read and write speed
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance//[id=5]5// may vary in real-world situations.Unless otherwise stated, data read and write speeds are based on theoretical performance.
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance may vary in re
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance may vary in real-world situations.Unless otherwise stated, data read and write speed
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance may vary in re
Unless otherwise stated, data read and write speeds are based on theoretical performance. Actual performance may vary in re
style
l4customsection-section
sectionId
id7
columnWidthD
12