Skip to content

Component library

Kanban Board component

Last updated 2 November 2026

Defines a Kanban board.

Live demo

<ins-kanban-board>
    <ins-kanban-column
      heading="TODO"
	  heading-color="#4ecdc4"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$308"
      add-item-button
	  add-item-button-label="Add New" >
      <ins-kanban-card id="columnItem">
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-12
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:12 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Courtney Henry
            </span>
          </div>
          <div class="primary-detail">
            $120
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="In Progress"
      heading-color="#76E5FC"
	  heading-text-color="#000"
      total-count="3"
      heading-sub-detail="$123"
      add-item-button >
      <ins-kanban-card>
        column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 3
      </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>

Attributes

<ins-kanban-board> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
boardGroup string _blank - Defines which boards belong to the same group (Can be used to drag and drop kanban cards from one kanban board to the other.)

<ins-kanban-column> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
add-item-button boolean false true, false Defines if an Add Item button should be shown on the board
add-item-button-label string Add Item - Label for the Add Item button
disable-sort boolean false true, false Disables the sorting/moving of cards in a board
heading string Heading - Heading label of the board
heading-color string #fff - Color of the heading
heading-text-color string - - Color of the heading text
heading-sub-detail string - - Heading's sub detail (will be shown on the right part of the heading wrapper)
no-items boolean false true, false Defines if there are card items inside the board
no-items-heading string - - No Items heading/label
total-count any - - Defines total count value

<ins-kanban-card> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
card-id string - - Defines unique identifier for the card
card-sortable-id number - - Defines sort order identifier for the card

<ins-kanban-column> Events

EVENT OBJECT DESCRIPTION
insColumnAdd heading, el Execute a script when the Add Item button is clicked
insAdd item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when a card is dropped into the column from another column
insChoose item, from, oldIndex Execute a script when a card is chosen
insDragStart item, from, oldIndex, oldDraggableIndex Execute a script on drag start
insDragEnd item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script on drag end
insMove item, to, from, relatedItem, insertedAfter Execute a script when a card is moved in the column or between columns
insPositionChanged item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when the dragged card changes position
insRemove item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when a card is removed from the column into another column
insSort item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when any change is done to the column (add/update/remove)
insUpdate item, to, from, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex Execute a script when the sorting is changed within the column

<ins-kanban-column> Methods

FUNCTION PARAMETERS RETURN DESCRIPTION
getColumnCardsOrder n/a array object Returns the order of the cards in the column (this is based from the card-sortable-id attribute of the ins-kanban-card)
reorderCards array n/a Reorders the cards in the column based on the passed order array (e.g. ["3", "2", "1])

<ins-kanban-card> Events

EVENT OBJECT DESCRIPTION
insClick cardId, currentOrder Execute a script when the card is clicked

Events Return Objects

OBJECT DESCRIPTION
heading Kanban Board heading value
el Kanban Board HTMLElement
item Dragged HTMLElement(kanban card)
to Target list(kanban column)
from Previous list(kanban column)
oldIndex Card element's old index within old parent
newIndex Card element's new index within new parent
oldDraggableIndex Card element's old index within old parent, only counting draggable elements
newDraggableIndex Card element's new index within new parent, only counting draggable elements
relatedItem HTMLElement(kanban card) on which previously has the dragged card's new position
insertedAfter Defines if the dragged card has been inserted after the related item

Examples

Kanban Column Empty State

<ins-kanban-board>
    <ins-kanban-column
      id="emptyComlumn"
      heading="Empty State (No Items)"
      no-items
      no-items-detail="Cras venenatis justo quis turpis vestibulum placerat. Curabitur aliquet lacus fringilla sem tempor lacinia.">
    </ins-kanban-column>
  </ins-kanban-board>

Kanban Column Disabled Sort

<ins-kanban-board>
    <ins-kanban-column
      id="disabledSortColumn"
      heading="Sort Disabled"
      disable-sort >
      <ins-kanban-card>
        column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 1 item 3
      </ins-kanban-card>
      <ins-kanban-card>
        <i>Please note that this only disables the sorting within the column, but you can still move cards from one column to another</i>
      </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>

Kanban Card Customisation

The kanban-card tag will not require you to put any attributes to display the contents you want inside it. This will allow you to customise the card contents in any way you like. However, this component still provides a default design which can be overriden via css. Just take note of the tags, classes, and containers used.

<ins-kanban-board>
    <ins-kanban-column
      heading="With the default design style containers and classes"
	  heading-color="#FFD6E0"
      total-count="2"
      add-item-button
	  add-item-button-label="Add Task">
      <ins-kanban-card>
        <div class="card-title">
          We design and make concrete products.
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-09
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:33 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Jane Cooper
            </span>
          </div>
          <div class="primary-detail">
            $98
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card>
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              Date
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              Time
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              The quick brown fox jumps over the lazy dog
            </span>
          </div>
          <div class="primary-detail">
            Price
          </div>
        </div>
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="With custom components, elements"
	  heading-color="#7BF1A8"
      total-count="3"
      add-item-button >
      <ins-kanban-card>
        <strong>Review the onboarding form copy before Friday.</strong>
        <i>The draft covers the welcome message, the first three steps and the link to the help centre. Send it to the content team for a read before it goes into the template.
        </i>
      </ins-kanban-card>
      <ins-kanban-card>
        <h3>Set up the welcome email for new members</h3>
      </ins-kanban-card>
      <ins-kanban-card>
        <i class="icon-heart"></i>
        <h3>
        Quarterly newsletter
        </h3>
        <doc-quote type="reference">
        <div>
            <span class="icon-feather"></span>
            <span class="box-title">Waiting on the design team for the hero image</span>
        </div>
        <p>Sample link <a href="https://docs.prod01-insites.io/" target="_blank">Insites Docs</a>.</p>
         </doc-quote>
     </ins-kanban-card>
    </ins-kanban-column>
  </ins-kanban-board>

Kanban Boards Grouping

By default, cards inside the columns that belong to the parent Kanban Board element can only be moved in that container only. However, if you want to move cards between different boards, you can achieve this by adding the board-group attribute on the Kanban Boards that you want to belong in the same group. This attribute is a string type and you can put any name that you prefer.

<ins-kanban-board board-group="MyGroup" class="MyGroup1">
    <ins-kanban-column
      heading="Board 1: MyGroup"
	  heading-color="#FF8C42" >
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 1: MyGroup"
	  heading-color="#FF8C42">
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(255, 140, 66, 0.25)">
        board 1 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>
<br>
<ins-kanban-board board-group="MyGroup" class="MyGroup2">
    <ins-kanban-column
      heading="Board 2: MyGroup"
	  heading-color="#FDE74C" >
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 2: MyGroup"
	  heading-color="#FDE74C">
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card style="background-color: rgba(253, 231, 76, 0.25)">
        board 2 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>
<br>
<ins-kanban-board>
    <ins-kanban-column
      heading="Board 3: No group" >
      <ins-kanban-card>
        board 3 column 1 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>
    <ins-kanban-column
      heading="Board 3: No group">
      <ins-kanban-card>
        board 3 column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        board 3 column 2 item 2
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>

Kanban Board Events/Methods

Please check console log for the output.

<ins-kanban-board>
    <ins-kanban-column
      id="myColumn"
      heading="TODO"
      total-count="2"
      heading-sub-detail="$308"
      add-item-button>
      <ins-kanban-card id="myCard" card-id="123" card-sortable-id="1">
        <div class="card-title">
          Item Name
        </div>
        <div class="sub-details-wrap">
          <div class="sub-detail">
            <i class="icon-calendar"></i>
            <span>
              2020-08-12
            </span>
          </div>
          <div class="sub-detail">
            <i class="icon-clock"></i>
            <span>
              2:12 PM
            </span>
          </div>
        </div>
        <div class="details-footer">
          <div class="user-options">
            <i class="icon-user-1"></i>
            <span>
              Courtney Henry
            </span>
          </div>
          <div class="primary-detail">
            $120
          </div>
        </div>
      </ins-kanban-card>
      <ins-kanban-card card-id="324" card-sortable-id="2">
        column 1 item 2
      </ins-kanban-card>
      <ins-kanban-card card-id="897" card-sortable-id="3">
        column 1 item 3
      </ins-kanban-card>
    </ins-kanban-column>

    <ins-kanban-column
      heading="In Progress (No Sort)"
      heading-sub-detail="$123"
      add-item-button
      disable-sort >
      <ins-kanban-card>
        column 2 item 1
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 2
      </ins-kanban-card>
      <ins-kanban-card>
        column 2 item 3
      </ins-kanban-card>
    </ins-kanban-column>
</ins-kanban-board>

<script>
    var myColumn = document.getElementById('myColumn');
  
    // Event for when the Add Item button is clicked
    myColumn.addEventListener('insColumnAdd', event => {
      console.log(event.detail);
      
      // Method that returns the order of the cards in the column (this is based from the card-sortable-id attribute of the ins-kanban-card)
      console.log(myColumn.getColumnCardsOrder())
      
      var order = ["3","2","1"];
      // Method that reorders the cards in the column based on the passed order array
      myColumn.reorderCards(order);
    });
	
    // Event for when the a drag has started
    myColumn.addEventListener('insDragStart', event => {
      console.log("insDragStart: ", event.detail);
    });
    
    // Event for when the a drag has ended
    myColumn.addEventListener('insDragEnd', event => {
      console.log("insDragEnd: ", event.detail);
    });
    
    // Event for when a card is dropped into the column from another column
    myColumn.addEventListener('insAdd', event => {
      console.log("insAdd: ", event.detail);
    });
    
    // Event for when any change is done to the column (add/update/remove)
    myColumn.addEventListener('insSort', event => {
      console.log("insSort: ", event.detail);
    });
    
    // Event for when when a card is chosen
    myColumn.addEventListener('insChoose', event => {
      console.log("insChoose: ", event.detail);
    });
    
    // Event for when the sorting is changed within the column
    myColumn.addEventListener('insUpdate', event => {
      console.log("insUpdate: ", event.detail);
    });
    
    // Event for when a card is moved in the column or between columns
    myColumn.addEventListener('insMove', event => {
      console.log("insMove: ", event.detail);
    });
    
    // Event for when a card is removed from the column into another column
    myColumn.addEventListener('insRemove', event => {
      console.log("insRemove: ", event.detail);
    });
    
    // Event for when the dragged card changes position
    myColumn.addEventListener('insPositionChanged', event => {
      console.log("insPositionChanged: ", event.detail);
    });

    var myCard = document.getElementById('myCard');
    // Event for when a card is clicked
    myCard.addEventListener('insClick', event => {
      console.log(event.detail)
    });
 </script>