How to

The Grid Switch component is used to switch between two layouts (e.g., switch between grid and list gallery views). You're not limited to the card in the demo; the component works with any content type.

Pass the following data attributes to the .js-grid-switch element:

• data-gs-item-class-1 → list of classes added to the list items if layout = 1
• data-gs-item-class-2 → list of classes added to the list items if layout = 2
• data-gs-content-class-1 → list of classes added to the list content (card) if layout = 1
• data-gs-content-class-2 → list of classes added to the list content (card) if layout = 2

Add the following classes to the grid switch children:

• js-grid-switch__controller to the controller → in can be any radio button (remember to add value=1 to the first radio button, value="2" to the second one)
• js-grid-switch__item to the grid list items
• js-grid-switch__content to the content (e.g., card elements)

The gap among the grid items is set using the CodyFrame's grid utility classes.

Here's a simplified version of the demo code:

<div class="grid-switch js-grid-switch" 
  data-gs-item-class-1="col-12 [email protected]" 
  data-gs-item-class-2="col-12" 
  data-gs-content-class-1="card-v10--state-1" 
  data-gs-content-class-2="card-v10--state-2">

  <!-- controller 👇 -->
  <div class="js-grid-switch__controller">
    <div>
      <input type="radio" name="radio-view-option" id="radio-grid" value="1" checked>
      <label for="radio-grid">Grid</label>
    </div>

    <div>
      <input type="radio" name="radio-view-option" id="radio-list" value="2">
      <label for="radio-list">List</label>
    </div>
  </div>

  <!-- grid 👇 -->
  <ul class="grid gap-md">
    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>

    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>

    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>
  </ul>
</div>