• Index
  • Core
    • button
    • link
    • base-header
    • base-section
    • base-heading
    • counter
    • img
    • icon
    • modal
    • footer
    • pagination
    • header
    • photogallery
    • cart-navigation
    • listing-navigation
    • listing-switch
    • tabs
  • Sections
    • posts-grid-section
    • post-detail-section
    • posts-list-section
    • usps-section
    • banner-section
    • faq-section
    • signpost-section
    • text-and-media-section
    • events-section
    • calendar-section
    • contact-form-section
    • steps-section
    • newsletter-section
    • hero-slider-section
    • documents-section
    • persons-section
    • testimonials-section
    • pricetable-section
    • priceplan-section
    • jobs-section
    • error-404-section
    • breadcrumbs-section
    • content-section
    • category-list-section
    • intro-section
    • registration-section
    • seo-section
    • team-image-section
    • gallery-section
    • cart-steps-section
    • products-listing-section
    • basket-thank-you-section
    • address-section
    • product-info-section
    • order-detail-section
    • order-section
    • ordered-products-section
    • product-detail
    • individual-print-section
    • filters-section
    • company-references-section
    • person-references-section
    • numbers-section
    • timeline-section
    • contact-boxes-section
    • reviews-section
    • print-configuration-footer-section
    • print-configuration-price-section
    • user-configurations-section
    • products-slider-section
  • Items
    • post-item
    • tag-item
    • alert-item
    • category-item
    • partner-item
    • information-item
    • content-toggle-item
    • product-item
    • product-overview-item
    • price-item
    • availability-item
    • progress-item
    • total-price-item
    • cart-item
    • tooltip-item
    • order-info-item
    • product-order-item
    • print-info-item
    • comparator-item
    • print-variant-item
  • Fields
    • text-field
    • password-field
    • file-field
    • textarea
    • single-select-field
    • single-select-inline-field
    • checkbox-field
    • checkbox-select-field
    • switch-field
    • date-field
    • color-field
    • radio-box-field
    • address-box-field
    • range-slider-field
  • Forms
    • contact-form
    • newsletter-form
    • registration-form
    • discount-form
    • address-form
    • user-info-form
    • review-form
    • send-cv-form
    • print-configuration-form
  • Widgets
    • cart-overview-widget
  • Modals
    • dimesions-modal
    • print-info-modal
    • product-out-of-stock-modal
    • wishlist-share-modal
    • print-method-modal
    • send-cv-modal
    • edit-comparator-name-modal
    • print-configuration-modal
    • delete-comparator-modal
    • delete-comparator-product-modal
    • delete-configuration-modal
  • Aside
    • documents-aside
    • delivery-aside
    • user-panel-aside
  • id:
  • figma
  • Preview
  • Twig
  • Html
    • Breadcrumbs Item
    • Breadcrumbs Item
  •         {% include "@Components/sections/breadcrumbs-section/breadcrumbs-section.twig" with {props: {
      title: "Breadcrumbs Item",
      homepage: "/",
      items: [
        {
          title: "Breadcrumbs Item",
          url: "#"
        }
      ]
    }} %}
    
          
  •           
    
    <section class="base-section --none s-breadcrumbs">
      <div class="base-section__container container">
            <nav class="g-breadcrumbs">
      <ul class="g-breadcrumbs__list d-flex gap-1 flex-wrap align-items-center py-2">
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --homepage">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="/">
          <span class="link__title"></span>
      
          <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
            
      <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.992 5.155 9.226 1.424a1.984 1.984 0 0 0-2.45 0l-4.768 3.73a2.612 2.612 0 0 0-1.007 2.067V15h13.998V7.221c0-.812-.367-1.566-1.007-2.066Zm-.743 8.095H2.751V7.221a.87.87 0 0 1 .336-.689l4.766-3.73a.238.238 0 0 1 .294 0l4.766 3.732a.868.868 0 0 1 .336.688v6.03-.002ZM6.25 7.126h3.5v3.5h-3.5v-3.5Z"/></svg>      </span>
        </span>
      
      </a>
      </li>
    
              <li class="i-breadcrumb d-flex align-items-center u-color-text-500">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="#" title="Breadcrumbs Item">
          <span class="link__title">Breadcrumbs Item</span>
      
      
      </a>
      </li>
        
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --current">
      <div class="i-breadcrumb__divider me-1"></div>
    
          Breadcrumbs Item
      </li>
      </ul>
    </nav>
        </div>
    </section>
    
    
            
  • Preview
  • Twig
  • Html
    • Breadcrumbs Item
  •         {% include "@Components/sections/breadcrumbs-section/breadcrumbs-section.twig" with {props: {
      title: "Breadcrumbs Item",
      homepage: "/"
    }} %}
    
          
  •           
    
    <section class="base-section --none s-breadcrumbs">
      <div class="base-section__container container">
            <nav class="g-breadcrumbs">
      <ul class="g-breadcrumbs__list d-flex gap-1 flex-wrap align-items-center py-2">
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --homepage">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="/">
          <span class="link__title"></span>
      
          <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
            
      <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.992 5.155 9.226 1.424a1.984 1.984 0 0 0-2.45 0l-4.768 3.73a2.612 2.612 0 0 0-1.007 2.067V15h13.998V7.221c0-.812-.367-1.566-1.007-2.066Zm-.743 8.095H2.751V7.221a.87.87 0 0 1 .336-.689l4.766-3.73a.238.238 0 0 1 .294 0l4.766 3.732a.868.868 0 0 1 .336.688v6.03-.002ZM6.25 7.126h3.5v3.5h-3.5v-3.5Z"/></svg>      </span>
        </span>
      
      </a>
      </li>
    
        
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --current">
      <div class="i-breadcrumb__divider me-1"></div>
    
          Breadcrumbs Item
      </li>
      </ul>
    </nav>
        </div>
    </section>
    
    
            
  • Preview
  • Twig
  • Html
    • Breadcrumbs Item
    • Breadcrumbs Item
    • Breadcrumbs Item
  •         {% include "@Components/sections/breadcrumbs-section/breadcrumbs-section.twig" with {props: {
      title: "Breadcrumbs Item",
      homepage: "/",
      items: [
        {
          title: "Breadcrumbs Item",
          url: "#"
        },
        {
          title: "Breadcrumbs Item",
          url: "#"
        }
      ]
    }} %}
    
          
  •           
    
    <section class="base-section --none s-breadcrumbs">
      <div class="base-section__container container">
            <nav class="g-breadcrumbs">
      <ul class="g-breadcrumbs__list d-flex gap-1 flex-wrap align-items-center py-2">
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --homepage">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="/">
          <span class="link__title"></span>
      
          <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
            
      <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" d="M13.992 5.155 9.226 1.424a1.984 1.984 0 0 0-2.45 0l-4.768 3.73a2.612 2.612 0 0 0-1.007 2.067V15h13.998V7.221c0-.812-.367-1.566-1.007-2.066Zm-.743 8.095H2.751V7.221a.87.87 0 0 1 .336-.689l4.766-3.73a.238.238 0 0 1 .294 0l4.766 3.732a.868.868 0 0 1 .336.688v6.03-.002ZM6.25 7.126h3.5v3.5h-3.5v-3.5Z"/></svg>      </span>
        </span>
      
      </a>
      </li>
    
              <li class="i-breadcrumb d-flex align-items-center u-color-text-500">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="#" title="Breadcrumbs Item">
          <span class="link__title">Breadcrumbs Item</span>
      
      
      </a>
      </li>
              <li class="i-breadcrumb d-flex align-items-center u-color-text-500">
      <div class="i-breadcrumb__divider me-1"></div>
    
          <a class="link d-inline-flex u-fw-600 align-items-center --text   --underline-initial  i-breadcrumb__link u-fw-700" href="#" title="Breadcrumbs Item">
          <span class="link__title">Breadcrumbs Item</span>
      
      
      </a>
      </li>
        
        <li class="i-breadcrumb d-flex align-items-center u-color-text-500 --current">
      <div class="i-breadcrumb__divider me-1"></div>
    
          Breadcrumbs Item
      </li>
      </ul>
    </nav>
        </div>
    </section>