Bootstrap Utility Example
p-4 rounded-4 shadow m-auto position-relative overflow-hidden
Css
Custom CSS Example
custom-image
Css
.custom-image {
}
Custom Callout Example
callout
Css
.callout {
width: 100%;
max-width: 850px;
}
.callout > * {
max-width: 65ch;
z-index:1;
}
.callout::after {
content: "";
background: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9InJnYmEoODUsIDAsIDI1NSwgMSkiIGNsYXNzPSJiaSBiaS1hc3RlcmlzayIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCAwYTEgMSAwIDAgMSAxIDF2NS4yNjhsNC41NjItMi42MzRhMSAxIDAgMSAxIDEgMS43MzJMMTAgOGw0LjU2MiAyLjYzNGExIDEgMCAxIDEtMSAxLjczMkw5IDkuNzMyVjE1YTEgMSAwIDEgMS0yIDBWOS43MzJsLTQuNTYyIDIuNjM0YTEgMSAwIDEgMS0xLTEuNzMyTDYgOCAxLjQzOCA1LjM2NmExIDEgMCAwIDEgMS0xLjczMkw3IDYuMjY4VjFhMSAxIDAgMCAxIDEtMXoiLz4KPC9zdmc+);
position: absolute;
height: 200px;
background-position: center;
right: 0;
top: 0;
background-size: 100%;
z-index: 0;
transform: translate(20%, -20%) rotate(45deg);
background-repeat: no-repeat;
aspect-ratio: 1/1;
opacity: 0.6;
}
overline
overline
Css
.overline .fs-2 {
order: -1;
border: 1px solid #131316;
width: max-content;
padding: 1px 10px;
border-radius: 12.5rem;
font-size: calc(1.25rem + 0.3vw)!important;
font-weight: 800;
text-transform: uppercase;
}
.overline img {
border-radius: 8px
}
@media (min-width: 1200px) {
.overline .fs-2 {
font-size: 2.5rem !important;
letter-spacing: -0.00125rem;
line-height: 36px;
padding: 8px 16px;
}
}
Iframe
iframe-custom
Css
.iframe-custom iframe {
height: 800px;
width: calc(100vw)!important;
}
@media (max-width: 1200px) {
.iframe-custom iframe {
height: 600px;
width: calc(100vw - 2rem)!important;
/* width: calc(100vw - 2rem); */
}
}
@media (max-width: 767px) {
.iframe-custom iframe {
min-width: 300px !important;
}
}
Eyebrow
eyebrow
Css
.eyebrow .h2 {
border: 1px solid #131316;
width: max-content;
padding: 1px 10px;
border-radius: 12.5rem;
}
@media (min-width: 1200px) {
.eyebrow .h2 {
padding: 8px 16px;
line-height: 36px;
}
}
Wrap text
wrap-text
Css
@media (min-width: 1200px) {
.wrap-text p {
width: 85%;
}
}
.overline .btn.btn-link {
padding: 0;
text-decoration: none;
}
Article list custum
article-list-custum
Css
/* .article-list-custum .card-body {
width: 70%;
}
.article-list-custum .card-body div:last-child {
position: absolute;
right: 34px;
bottom: 60px;
border: 1px solid #FF6D04;
border-radius: 30px;
padding: 8px 40px;
}
.article-list-custum .card-body div:last-child:not(:last-of-type) {
position: unset;
}
*/
h2 {
font-size: 60px
line-height: 51px
}
Article card padding
article-card-padding
Css
.article-card-padding .col.p-3 {
padding: 2rem!important;
}
@media (max-width: 1200px) {
.article-card-padding .col.p-3 {
padding: 1rem!important;
}
}
Article category
article-category
Css
.article-category .badge {
padding: 8px 10px;
margin-bottom: 10px;
font-weight: normal;
border-radius: 30px;
border: 1px solid;
background: #F5F5E7!important;
border: #F5F5E7;
font-size: 12px;
}
@media (min-width: 1200px) {
.article-category .gap-4:not(.grid-md-2) {
gap: .5rem!important
}
.article-category .gap-4.grid-md-2 {
gap: 5rem 1rem!important;
}
}
Service menu
service-menu
Css
.service-menu .container-xl > .flex-row{
overflow-y: scroll;
}
.service-menu .fs-7 {
font-size: 0.75rem!important;
font-weight: 500!important;
text-transform: uppercase;
}
@media (min-width: 1200px) {
.service-menu {
overflow: unset;
}
.service-menu .nav-item {
padding: 0 1rem;
}
}
Curve form
curve-form
Css
.curve-form .item_swift_app {
border-radius: 10px;
}
.curve-form .item_swift_app textarea {
height: 100px !important;
}
@media (min-width: 1200px) {
.curve-form {
padding: 8rem;
}
.curve-form .item_swift_app textarea {
height: 275px !important;
}
}
Hero text last item
hero-text-last-item
Css
.hero-text-last-item .mb-0-last-child.text-inherit {
order: 99;
margin-top: 20px;
}
.hero-text-last-item .btn {
margin-top: 2rem!important;
}
@media (min-width: 1200px) {
.hero-text-last-item .display-1 {
margin-bottom: 3rem!important;
}
.hero-text-last-item .fs-3 {
padding: 0 75px;
}
}
Hero btn top space
hero-btn-top-space
Css
.hero-btn-top-space .btn {
margin-top: 1rem;
}
.hero-btn-top-space .btn-link {
align-self: center;
}
@media (min-width: 1200px) {
.hero-btn-top-space .btn {
margin-top: 2rem;
}
}
Special module link
special-module-link
Css
.special-module-link {
position: relative;
}
@media (min-width: 1200px) {
.special-module-link .btn.btn-link {
position: absolute;
right: 2rem;
bottom: 2rem;
}
}
Eyebrow center
eyebrow-center
Css
.eyebrow-center .h2 {
margin: auto;
}
Text center
text-center
Css
.text-center {
text-align: center;
}
Hero slider btn space
hero-slider-btn-space
Css
@media (min-width: 1200px) {
.hero-slider-btn-space .h1 {
padding-bottom: 1rem
}
}
Article headline
article-headline
Css
@media (min-width: 1200px) {
.article-headline h1{
padding-bottom: 1rem;
}
.article-headline .grid-1.theme {
padding-left: 5rem!important;
padding-right: 5rem!important;
}
}
Account Headlines
account-headlines
Css
.account-headlines h1.h6 {
font-size: calc(1.8rem + 0.5vw);
text-transform: uppercase;
}
@media (min-width: 1200px) {
.account-headlines h1.h6 {
font-size: 3rem;
line-height: 51px;
letter-spacing: -0.075rem;
}
}
.account-headlines h2.h6 {
font-size: calc(1.25rem + 0.3vw);
text-transform: uppercase;
}
@media (min-width: 1200px) {
.account-headlines h2.h6 {
font-size: 2rem;
line-height: 36px;
letter-spacing: -0.00125rem;
}
}
.account-headlines h3.h6 {
font-size: calc(1.1rem + .6vw)!important;
font-weight: 500;
text-transform: uppercase;
}
@media (min-width: 1200px) {
.account-headlines h3.h6 {
font-size: 1.5rem !important;
line-height: 37.8px;
}
}
.account-headlines .h4 {
font-size: calc(1rem + 0.9vw);
line-height: normal;
font-weight: 500;
}
.account-headlines .container-xl {
display: block !important;
}
Checkout typography
checkout-typography
Css
.checkout-typography .fs-6 {
font-size: 2rem!important;
font-weight: 800 !important;
letter-spacing: -0.05rem;
}
.checkout-typography .fs-8 {
font-size: 1rem!important;
}
Account btn
account-btn
Css
.account-btn .btn-secondary {
background: #FF6D04;
border-color: #FF6D04;
color: #fff;
}
.account-btn .btn-secondary:hover {
background: #DA5E04;
border-color: #DA5E04;
color: #fff;
}
Mega menu
mega-menu
Css
@media (min-width: 992px) {
.mega-menu:hover {
background: #F9F9ED;
}
.mega-menu .dropdown-menu.megamenu {
padding-bottom: 6rem!important;
padding-top: 6rem!important;
}
}
.mega-menu .nav-item .nav-link {
font-size: 0.75rem!important;
letter-spacing: 0.5px;
padding: 0.5rem 2rem !important;
}
Product page header
product-page-header
Css
.product-page-header .g-col:not(.order-first) {
padding: 1rem;
}
@media (min-width: 992px) {
.product-page-header .g-col:not(.order-first) {
padding: 2.5rem 2rem;
max-height: 40rem;
}
}
@media (min-width: 1200px) {
.product-page-header .g-col:not(.order-first) {
padding: 2.5rem 5rem;
max-height: 40rem;
}
.product-page-header .g-col:not(.order-first) .w-100 {
display: flex;
flex-direction: column;
height: 100%;
}
/* .product-page-header .g-col:not(.order-first) .w-100 .item_swift_3columnscomponentedit {
margin-top: auto;
} */
.product-page-header .g-col:not(.order-first) .w-100 .item_swift_2columnscomponentedit {
margin-top: auto;
}
}
Product page price
product-page-price
Css
.product-page-price .text-price {
font-size: 1.125rem;
font-weight: 600;
}
.product-page-price .item_swift_productprice .gap-3 {
gap: .5rem!important;
}
/* .product-page-price .item_swift_productprice .flex-wrap {
flex-wrap: nowrap!important;
} */
.product-page-price .item_swift_productprice .text-decoration-line-through + span .text-price {
color: #F56905;
}
Product details RTE link
product-details-rte-link
Css
.product-details-rte-link a:not(.headline-link) {
color: #F56905;
font-size: 0.875rem;
font-weight: 600;
text-decoration: underline;
}
.product-details-rte-link a:hover, .headline-link:hover {
color: #DA5E04;
text-decoration: none;
}
Product details content image
product-details-content-image
Css
.product-details-content-image img {
border-radius: 20px;
}
Overline bottom space
overline-bottom-space
Css
.overline-bottom-space .fs-2 {
margin-bottom: 1rem !important;
}
@media (min-width: 1200px) {
.overline-bottom-space .fs-2 {
margin-bottom: 2rem !important;
}
}
Text - advanced
text-advanced
Css
.text-advanced .fs-3 {
text-transform: none;
}
Hover effect row
hover-effect-row
Css
.hover-effect-row {}
Products nav
products-nav
Css
.products-nav .d-lg-block {
display: none!important;
}
.products-nav h2.h3 {
display: none!important;
}
.products-nav .border-bottom {
border-bottom: none!important;
}
@media (min-width: 992px) {
.products-nav .d-lg-none {
display: block !important;
}
.products-nav .flex-nowrap {
flex-wrap: wrap !important;
}
.products-nav .vw-100, .products-nav .navbar {
width: calc(100% - 2rem)!important;
}
.products-nav .nav-pills.gap-2 {
gap: 1.5rem!important;
}
.products-nav .nav-item .rounded-pill {
font-weight: 600;
padding: 0.8rem;
}
}
Reset padding
reset-padding
Css
@media (min-width: 1200px) {
.reset-padding .py-xl-4 {
padding-bottom: 0!important;
padding-top: 0!important;
}
}
Container compressed custom
container-compressed-custom
Css
.container-compressed-custom {
}
Center headline long description
center-headline-long-description
Css
.center-headline-long-description .item_swift_productlongdescription .text-start {
text-align: center !important;
}
Bundle image
bundle-image
Css
.bundle-image .item_swift_productdetailsimage_custom .align-items-center.justify-content-center {
justify-content: normal !important;
align-items: normal !important;
}
Auto margin top
auto-margin-top
Css
.auto-margin-top {
margin-top: auto;
}
Product card
product-card
Css
product-card {
}
Article card
article-card
Css
@media (min-width: 992px) {
.article-card .article-list .card .ratio:before {
padding-top: 85%!important;
}
.article-card .article-list .card .ratio>* {
width: 85%!important;
}
.article-card .article-list .card .ratio {
width: 90%!important;
}
}
Full width
full-width
Css
.full-width .mw-75ch {
max-width: 100ch !important;
}
Iframe-old
iframe-custom-old
Css
.iframe-custom-old iframe {
height: 800px;
}
@media (max-width: 1200px) {
.iframe-custom-old iframe {
height: 600px;
width: calc(100vw - 2rem)!important;
width: calc(100vw - 2rem);
}
}
Filter sticky top
sticky-top
Css
sticky-top
Event slider background
event-slider-background
Css
.event-slider-background {
margin-top: 4rem;
}
Facets list
facets-list
Css
PDP breadcrumb
pdp-breadcrumb
Css
@media (min-width: 992px) {
.pdp-breadcrumb .order-first {
margin-left: auto;
margin-right: auto;
padding-left: var(--bs-gutter-x, 1rem);
padding-right: var(--bs-gutter-x, 1rem);
width: 100%;
}
}
Footer joinUs image
footer-joinUs-image
Css
.footer-joinUs-image img {
max-width: 60rem;
}
Group list
group-list
Css
.group-list .fs-3 {
font-size: 1.3rem !important;
line-height: 30px;
}
Event pdp
event-pdp
Css
@media (min-width: 992px) {
.event-pdp.bundle-image img {
/*padding: 0 8rem 8rem 0;*/
}
}
Productspecification custom
productspecification_custom
Css
.productspecification_custom .item_swift_productspecification_custom > .grid:first-of-type > .g-col-12:first-child {
padding: 2rem;
}