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;
}
Ved at klikke "Accepter alle" giver du samtykke til, at vi med cookies indsamler information omkring din adfærd på vores hjemmeside. Vi benytter denne information til funktionelle, statistiske og markedsføringsmæssige formål.