WidgetStack

랜딩·가입의 예시 위젯 겹침 구성.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

variant

label

예시

상태

랜딩
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3
가입
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3
한 줄
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3

이렇게 · 이렇게 하지 않기

이렇게 모든 위젯에 “예시” 태그를 단다.
이렇게 하지 않기 실제 사용자 데이터처럼 보이는 사람 이름이나 회사명은 쓰지 않는다. 결과를 약속하는 수치(“30개 찾음”)를 넣지 않는다.
이렇게 하지 않기 움직이거나 빛을 뒤에 깔지 않는다. 예시 안의 링크·버튼은 그리지 않는다(inert).
이렇게 21st 참고: Bento Grid Hero(ln-dev7 bento-02 — 정지된 묶음 + 버튼 하나), Draggable Widget Grid(carolinaraulino), Bento Grid(kokonutd), Bento Grid(manuarora700), Draggable Grid Dashboard(uilayout default-swapy). default-swapy의 “57K +10%” 같은 가짜 KPI와 kokonutd의 1.5초 확대 등장은 버렸다.

21st — Bento Grid Hero (ln-dev7) ↗

토큰과 속성

이름	타입	기본값	설명
`variant?`	`'landing' \| 'signup' \| 'strip'`	`landing`	landing(세 개 겹침) · signup(좁은 세로) · strip(한 줄, 320에서는 1개).
`label?`	`string`		figure 이름. 비우면 “예시 위젯”.
그 밖의 속성	—	—	id, data-* 등 네이티브 figure 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

미리보기

예시 언어동작 줄이기

variant

label

예시

상태

랜딩
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3
가입
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3
한 줄
Rediscover
Example
2 weeks agoOct 7
Customer onboarding guide draft
3 records from the same week
Google Docs · Oct 7
Before next event
Example
2:00 PM Quarterly plan review
September planning notes · Gmail 9/30
Last quarter’s meeting · Calendar 7/14
Connections
Example
Gmail · Google Calendar
Scanning · up to Oct 3

이렇게 · 이렇게 하지 않기

이렇게 모든 위젯에 “예시” 태그를 단다.

이렇게 하지 않기 실제 사용자 데이터처럼 보이는 사람 이름이나 회사명은 쓰지 않는다. 결과를 약속하는 수치(“30개 찾음”)를 넣지 않는다.

이렇게 하지 않기 움직이거나 빛을 뒤에 깔지 않는다. 예시 안의 링크·버튼은 그리지 않는다(inert).

이렇게 21st 참고: Bento Grid Hero(ln-dev7 bento-02 — 정지된 묶음 + 버튼 하나), Draggable Widget Grid(carolinaraulino), Bento Grid(kokonutd), Bento Grid(manuarora700), Draggable Grid Dashboard(uilayout default-swapy). default-swapy의 “57K +10%” 같은 가짜 KPI와 kokonutd의 1.5초 확대 등장은 버렸다.

토큰과 속성

이름	타입	기본값	설명
`variant?`	`'landing' \| 'signup' \| 'strip'`	`landing`	landing(세 개 겹침) · signup(좁은 세로) · strip(한 줄, 320에서는 1개).
`label?`	`string`		figure 이름. 비우면 “예시 위젯”.
그 밖의 속성	—	—	id, data-* 등 네이티브 figure 속성은 그대로 전달된다. className·style·children은 받지 않는다.

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기

개요

예시

상태

이렇게 · 이렇게 하지 않기

토큰과 속성

접근성

함께 보기