CSS

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;
}

bottom border

border-bottom

Css

Back to top

Css

/* CSS styles for the Back to Top button */
.back-to-top-button {
    position: fixed;
    bottom: 20px; /* Adjust the distance from the bottom as needed */
    right: 20px; /* Adjust the distance from the right as needed */
    display: none;
    z-index: 999; /* Ensure it appears above other content */
    font-size: 1.75rem;
}

bottom border yellow

bottom-border-yellow

Css

.bottom-border-yellow {
border-bottom: 2px solid #ffdc00;
}

Buttons

theme .btn-primary theme .btn-secondary

Css

.theme .btn-primary, .theme .btn-secondary, .theme .swift_quantity-field {
border-top-left-radius: 0px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

Align right

text-right

Css

.text-right {
text-align: right;
}

bottom border - product list

border-bottom-product-list

Css

.border-bottom-product-list {
border-bottom: 1px solid #dfdfdf;;
}

Margin left

margin-left

Css

.px-2 {
  padding-left: ($spacer * .35) !important;
}

Idena_MW

Css

h-100 d-flex position-relative align-items-center justify-content-center theme iden-weiss item_swift_textadvanced { 
         border-top-right-radius: 30%; }

Rounded corner text advanced

round-corner

Css

.round-corner .item_swift_textadvanced{
border-top-right-radius: 30%;
}

Rounded corner image col

img-round

Css

.img-round img{
border-top-right-radius: 30%;
}

Rounded corner text advanced_TW

round-corner_1

Css

.round-corner_1 .item_swift_textadvanced{
border-top-right-radius: 50px;
}

border-tw

border-themenwelt

Css

.border-themenwelt {
border-width: thick;
}

Rounded corner row

round-corner_2

Css

.round-corner_2 .item_swift_2columns_9-3{
border-top-right-radius: 160px;
}

idenbackgroundleft

idenbackgroundleft

Css

.idenbackgroundleft{
     background-position-x: 0% !important;
}

Product detail component

js-product-detail

Css

idengrouplist

idengrouplist

Css

.idengrouplist .btn {
     padding:0.35rem 0.75rem;
}
.idengrouplist .btn .fs-7 {
     font-size:0.75rem!important;
     font-weight:normal;
}

Product List Redesign - Bottom border

redesign-bottom-border

Css

.redesign-bottom-border {
border-bottom: 1px solid #d9d9d9;
padding-bottom: 5px;
}

Product List Redesign - Spacing

Css

.w-100 {
width: auto;
}

Product List Redesign - Buttons

Css

.btn btn-primary  btn-sm w-100 js-add-to-cart-button rounded-4 {
border-top-left-radius: 0px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}