codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
코드자카 dist/snippets/pricing.html — 구성 요소 #1
HTML 컨텐츠
<div class="overflow-hidden"> <div class="container content-space-1"> <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10"> <h2>{{title}}</h2> </div> <div class="position-relative"> <div class="row mb-5"> <div class="col-lg-6 mb-4 mb-lg-0"> <div class="card card-lg h-100"> <div class="card-body"> <div class="mb-3"> <h4 class="mb-1">{{title2}}</h4> <p>{{content}}</p> </div> <div class="d-flex mb-5"> <div class="flex-shrink-0"> <span class="display-4 lh-1 text-dark">{{text}}</span> </div> <div class="flex-grow-1 align-self-end ms-3"> <span class="d-block">{{text2}}</span> </div> </div> <div class="row"> <div class="col-sm-6"> <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2"> <li class="list-checked-item">{{text3}}</li> <li class="list-checked-item">{{text4}}</li> <li class="list-checked-item">{{text5}}</li> </ul> </div> <div class="col-sm-6"> <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2"> <li class="list-unchecked-item">{{text6}}</li> <li class="list-unchecked-item">{{text7}}</li> <li class="list-unchecked-item">{{text8}}</li> </ul> </div> </div> </div> <div class="card-footer pt-0"> <div class="row align-items-center"> <div class="col"> <span class="fs-5 text-muted d-block">{{text9}}</span> <span class="fs-5 text-muted d-block">{{text10}}</span> </div> <div class="col-auto"> <a class="btn btn-white" href="{{link}}">{{text22}}</a> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="card card-lg card-shadow card-pinned h-100"> <span class="badge bg-dark text-white card-pinned-top-end">{{text11}}</span> <div class="card-body"> <div class="mb-3"> <h4 class="mb-1">{{title3}}</h4> <p>{{content2}}</p> </div> <div class="d-flex mb-5"> <div class="flex-shrink-0"> <span class="display-4 lh-1 text-dark">{{text12}}</span> </div> <div class="flex-grow-1 align-self-end ms-3"> <span class="d-block">{{text13}}</span> </div> </div> <div class="row"> <div class="col-sm-6"> <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2"> <li class="list-checked-item">{{text14}}</li> <li class="list-checked-item">{{text15}}</li> <li class="list-checked-item">{{text16}}</li> </ul> </div> <div class="col-sm-6"> <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2"> <li class="list-checked-item">{{text17}}</li> <li class="list-checked-item">{{text18}}</li> <li class="list-checked-item">{{text19}}</li> </ul> </div> </div> </div> <div class="card-footer pt-0"> <div class="row align-items-center"> <div class="col"> <span class="fs-5 text-muted d-block">{{text20}}</span> <span class="fs-5 text-muted d-block">{{text21}}</span> </div> <div class="col-auto"> <a class="btn btn-primary" href="{{link2}}">{{text23}}</a> </div> </div> </div> </div> </div> </div> <figure class="position-absolute top-0 end-0 zi-n1 d-none d-md-block mt-10 me-n10" style="width: 4rem;"> <img alt="이미지 설명" class="img-fluid" src="../assets/svg/components/pointer-up.svg"/> </figure> <figure class="position-absolute bottom-0 start-0 zi-n1 ms-n10 mb-n10" style="width: 15rem;"> <img alt="이미지 설명" class="img-fluid" src="../assets/svg/components/curved-shape.svg"/> </figure> </div> <div class="text-center"> <p class="fs-6 text-muted mb-0">{{content3}}</p> </div> </div> </div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장