codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
코드자카 dist/snippets/cards-grid.html — 컴포넌트 #7
HTML 컨텐츠
<div class="container content-space-1 overflow-hidden"> <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10"> <h2>{{title}}</h2> </div> <div class="row row-cols-1 row-cols-sm-2 gx-7"> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link}}"> <div class="card-pinned card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image}}"/> <span class="badge bg-dark text-white card-pinned-top-end">{{text}}</span> </div> <div class="card-body"> <h4>{{title2}}</h4> <p class="card-text">{{content}}</p> </div> </a> </div> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link2}}"> <div class="card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image2}}"/> </div> <div class="card-body"> <h4>{{title3}}</h4> <p class="card-text">{{content2}}</p> </div> </a> </div> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link3}}"> <div class="card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image3}}"/> </div> <div class="card-body"> <h4>{{title4}}</h4> <p class="card-text">{{content3}}</p> </div> </a> </div> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link4}}"> <div class="card-pinned card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image4}}"/> <span class="badge bg-dark text-white card-pinned-top-end">{{text2}}</span> </div> <div class="card-body"> <h4>{{title5}}</h4> <p class="card-text">{{content4}}</p> </div> </a> </div> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link5}}"> <div class="card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image5}}"/> </div> <div class="card-body"> <h4>{{title6}}</h4> <p class="card-text">{{content5}}</p> </div> </a> </div> <div class="col mb-5"> <a class="card card-ghost card-transition-zoom h-100" href="{{link6}}"> <div class="card-transition-zoom-item"> <img alt="이미지 설명" class="card-img" src="{{image6}}"/> </div> <div class="card-body"> <h4>{{title7}}</h4> <p class="card-text">{{content6}}</p> </div> </a> </div> </div> <div class="text-center"> <a class="btn btn-white btn-pointer" href="{{link7}}">{{text3}}</a> </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
이미지
숫자
기본값
삭제
저장