UI Blocks 31 / 40

Sticky CTA

화면에 붙어 따라오는 예약 바 — 서로 다른 구성을 한 화면에 모았습니다. 필요한 것을 골라 페이지에 그대로 옮겨 쓰십시오.

전체 목록 모든 예시는 이 테마의 @theme 토큰만 사용합니다.

하단 고정 상담 바

스크롤이 조금 내려가면 화면 아래에 붙어 따라오는 띠. 정본 훅이 노출 시점을 판단한다

시연 무대 — 실제 페이지에서는 화면 아래에 고정됩니다. 조금 내리면 나타납니다.

진료 예약·상담은 데스크에서 받습니다. 평일 09시부터 18시까지

전화·문의·맨 위로를 세로로 쌓는다. 화면 폭을 거의 쓰지 않아 긴 본문 위에 얹기 좋다

본문이 길어도 오른쪽 아래 묶음은 자리를 거의 차지하지 않습니다. 전화·문의·맨 위로 세 갈래만 남기는 것이 이 형태의 전제입니다.

페이지를 떠나지 않고 바 안에서 바로 상담을 신청한다. 이름과 연락처 두 칸만 받는다

시연 무대 — 실제 페이지에서는 화면 아래에 고정됩니다. 조금 내리면 나타납니다.

화면 맨 위에 붙는 한 줄. 마감처럼 시간이 걸린 안내에 쓴다. 닫을 수 있다

접수 마감 · 구강건강 강좌 신청이 3일 남았습니다

지금 신청

상단 띠는 높이가 낮아 본문을 거의 밀지 않습니다. 대신 눈에 오래 남지 않으므로 한 번만 보면 되는 안내에 적합합니다. 닫기를 누르면 이번만, 오늘 그만보기를 누르면 하루 동안 이 띠가 보이지 않습니다.

가장자리에 세로로 붙어 본문을 거의 가리지 않는다. 조금 내려가면 나타난다

세로 탭은 본문 위에 얹히지 않고 가장자리만 차지합니다. 대신 좁은 화면에서는 본문 폭을 실제로 줄이므로, 모바일에서는 숨기고 03번 바를 대신 쓰는 구성이 흔합니다.

평소엔 작은 손잡이 하나만 떠 있다가 누르면 위로 펼쳐져 네 갈래를 낸다. 본문을 거의 안 가린다

시연 무대 — 우측 아래 손잡이를 눌러 보십시오.

같은 버튼의 두 상태를 실제로 오간다. 본문에 집중할 땐 라벨을 접어 아이콘만 남긴다

오른쪽 아래 버튼의 접기를 눌러 보십시오. 라벨이 접히면서 아이콘만 남습니다. 긴 본문에서 버튼이 시야를 덜 차지하게 만드는 방법입니다.

따로 떠 있던 두 버튼을 한 덩어리로 묶는다. 맨 위로가 실제로 동작한다

떠 있는 버튼이 늘어날수록 본문이 좁아 보입니다. 목적이 다른 두 버튼이라도 자리가 같다면 하나로 묶는 편이 화면이 정돈됩니다. 아래 칸을 누르면 페이지 맨 위로 올라갑니다.