codejaka
builder
포트폴리오
위젯 관리
새 프로젝트
위젯 수정
미리보기
새로고침
렌더 결과는
이미지
로 표시됩니다. 저장 시 동일 이미지가 위젯 목록 썸네일로도 등록됩니다.
기본 정보
위젯 이름
*
구성 위치
Header
Body
Footer
카테고리
헤더
히어로
일반
본문 컨텐츠
공통
상태표시
단계표시
탭메뉴
아이콘
카드
리뷰
가격표
팀
CTA
갤러리
클라이언트
FAQ
댓글
프로필
오시는길
예약
푸터
간단 설명
코드자카 dist/snippets/cards-grid.html — 컴포넌트 #2
HTML 컨텐츠
<div class="overflow-hidden"> <div class="container content-space-1"> <div class="row justify-content-lg-between"> <div class="col-md-4 mb-5 mb-md-0"> <div class="mt-md-10 mb-5"> <h2>{{title}}</h2> <p>{{content}}</p> </div> <div class="alert alert-soft-dark" role="alert"> <div class="d-flex"> <div class="flex-shrink-0"> <i class="bi-instagram"></i> </div> <div class="flex-grow-1 ms-3"> 코드자카의 일상을 보려면 <a class="alert-link" href="{{link}}" target="_blank">Instagram</a>에서 팔로우하세요 </div> </div> </div> </div> <div class="col-md-7"> <div class="swiper-center-mode-end"> <div class="js-swiper-card-grid swiper swiper-equal-height ps-4"> <div class="swiper-wrapper"> <div class="swiper-slide pt-4 pb-8"> <a class="card card-transition" href="{{link2}}"> <div class="card-pinned"> <img alt="이미지 설명" class="card-img-top" src="../assets/svg/components/card-3.svg"/> <span class="badge bg-dark text-white card-pinned-top-end">{{text}}</span> </div> <div class="card-body"> <h5 class="card-title">{{title2}}</h5> <p>{{content2}}</p> </div> <div class="card-footer pt-0"> <span class="card-link">{{text2}}</span> </div> </a> </div> <div class="swiper-slide pt-4 pb-8"> <a class="card card-transition bg-primary" href="{{link3}}" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);"> <div class="card-body"> <span class="card-subtitle text-white mb-3">{{text3}}</span> <h3 class="card-title text-white lh-base">{{title3}}</h3> </div> <div class="card-footer pt-0"> <span class="card-link link-light">{{text4}}</span> </div> </a> </div> <div class="swiper-slide pt-4 pb-8"> <a class="card card-transition" href="{{link4}}"> <div class="card-pinned"> <img alt="이미지 설명" class="card-img-top" src="../assets/svg/components/card-1.svg"/> <span class="badge bg-dark text-white card-pinned-top-end">{{text5}}</span> </div> <div class="card-body"> <h5 class="card-title">{{title4}}</h5> <p>{{content3}}</p> </div> <div class="card-footer pt-0"> <span class="card-link">{{text6}}</span> </div> </a> </div> <div class="swiper-slide pt-4 pb-8"> <a class="card card-transition bg-warning" href="{{link5}}" style="background-image: url(../assets/svg/components/wave-pattern-2-light.svg);"> <div class="card-body"> <span class="card-subtitle text-white mb-3">{{text7}}</span> <h3 class="card-title text-white lh-base">{{title5}}</h3> </div> <div class="card-footer pt-0"> <span class="card-link link-light">{{text8}}</span> </div> </a> </div> </div> <div class="js-swiper-card-grid-button-prev swiper-button-prev swiper-static-button-prev"></div> <div class="js-swiper-card-grid-button-next swiper-button-next swiper-static-button-next"></div> <div class="js-swiper-preloader swiper-preloader"> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">로딩 중...</span> </div> </div> </div> </div> </div> </div> </div> </div>
변수 플레이스홀더:
{{변수명}}
편집 가능 변수
변수 추가
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
변수명
라벨
타입
텍스트
긴 텍스트
URL
이미지
숫자
기본값
삭제
저장