• 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

Listing switch

  • id:
  • figma

Default

  • Preview
  • Twig
  • Html
  •         {% include "@Components/listing-switch/listing-switch.twig" with {props: {
      grid: {
        url: "?grid=1",
        active: true
      },
      rows: {
        url: "?rows=1",
        active: false
      }
    }} %}
    
          
  •           <div class="c-listing-switch d-flex gap-1">
      <a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before   --hover-icon --active" href="?grid=1" title="Klasické zobrazení">
      
          <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 --lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="#15324F" stroke-width="1.8" d="M3.9 3.9h6.2v6.2H3.9zM13.9 3.9h6.2v6.2h-6.2zM13.9 13.9h6.2v6.2h-6.2zM3.9 13.9h6.2v6.2H3.9z"/></svg>      </span>
        </span>
      
          <span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
            
      <span class="icon d-flex align-items-center justify-content-center --colored --text --lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" d="M3 3h8v8H3zM13 3h8v8h-8zM13 13h8v8h-8zM3 13h8v8H3z"/></svg>      </span>
        </span>
      </a>
    
      <a class="link d-inline-flex u-fw-600 align-items-center --text --icon-before   --hover-icon" href="?rows=1" title="Řádkové zobrazení">
      
          <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 --lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" fill-rule="evenodd" d="M19.2 4.8H4.8v4.4h14.4V4.8ZM3 3v8h18V3H3ZM19.2 14.8H4.8v4.4h14.4v-4.4ZM3 13v8h18v-8H3Z" clip-rule="evenodd"/></svg>      </span>
        </span>
      
          <span class="link__icon --hover d-none align-items-center justify-content-center flex-shrink-0">
            
      <span class="icon d-flex align-items-center justify-content-center --colored --text --lg">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#15324F" d="M3 3h18v8H3zM3 13h18v8H3z"/></svg>      </span>
        </span>
      </a>
    </div>