> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Kanban

> The code for this example can be used in the Markdown visualization to create a Kanban-style project board.

In this example, each card on the board represents a company in the dataset.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban-6ca14b6d927c0cccbb2614e284330d5c.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=9dde7654c752679c940017bce819856e" alt="" width="1946" height="1420" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban-6ca14b6d927c0cccbb2614e284330d5c.png" />

## Example query

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban_query-23923fc50ec8b45afdfd9b78887fc977.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=e3e43c64451d3a5be664bbd5d9fe6aa7" alt="" width="2862" height="1034" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban_query-23923fc50ec8b45afdfd9b78887fc977.png" />

## Example dataset

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban_data_raw-a8143a569eb8e1883f8ba7d3ba27c010.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=7de3d8b40ffe36bedf8187d26c1d5c24" alt="" width="2196" height="1072" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/kanban_data_raw-a8143a569eb8e1883f8ba7d3ba27c010.png" />

## Example code

```html expandable theme={null}
<style>
  /* Base styling */
  body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #F4F5F7;
  }
  
  /* Kanban table styling */
  .kanban-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 15px 0;
    margin-bottom: 20px;
  }
  
  .kanban-table th {
    background-color: #F4F5F7;
    color: #5D5FEF;
    font-size: 18px;
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #5D5FEF;
    border-radius: 8px 8px 0 0;
  }
  
  .kanban-table td {
    padding: 10px;
    vertical-align: top;
    background-color: #FAFAFA;
    border-radius: 0 0 8px 8px;
  }
  
  /* Card styling */
  .kanban-card {
    background-color: white;
    border-radius: 10px;
    border-left: 4px solid #5D5FEF;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    padding: 12px;
    margin-bottom: 15px;
    position: relative;
  }
  
  .card-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 8px;
    color: #2C2F77;
    padding-right: 70px; /* Make room for the image */
  }
  
  .card-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
  }
  
  .card-metrics {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    border-top: 1px solid #eee;
    padding-top: 8px;
  }
  
  .card-image {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* Tag styling */
  .tag {
    display: inline-block;
    background-color: #5D5FEF25;
    color: #2C2F77;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
  
  /* Priority indicators */
  .priority-one {
    border-left-color: #ff4d4d;
  }
  
  .priority-two {
    border-left-color: #ffb84d;
  }
  
  .priority-three {
    border-left-color: #4da6ff;
  }
  </style>

<!-- <h1 style="color: #191970; text-align: center;">Project Kanban Board</h1> -->  
<table class="kanban-table">
    <thead>
      <tr>
        <th>Sales Ready</th>
        <th>Trial</th>
        <th>Closed Won</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          {{#result}}
          {{#Sales Ready.opptys.opportunity_name_list.value}}
          <!-- Static examples representing how the template would render -->
          <div class="kanban-card priority-high">
            <div class="card-title">{{Sales Ready.opptys.opportunity_name_list.value}}</div>
            <div class="card-description">{{Sales Ready.opptys.arr_sum.value}}</div>
            <div><span class="tag">{{Sales Ready.opptys.type_list.value}}</span> </div>
            <div class="card-metrics">
              <span>Owner: {{Sales Ready.opptys.account_owner_list.value}}</span>
              <span>Close Date: {{Sales Ready.opptys.close_date_date_max.value_static}}</span>
            </div>
            <img class="card-image" src="{{Sales Ready.opptys.logo_list.value_static}}" alt="Company logo">
          </div>
          {{/Sales Ready.opptys.opportunity_name_list.value}}
          {{/result}}
        </td>
        <td>
          {{#result}}
          {{#Trial.opptys.opportunity_name_list.value}}
          <!-- Static examples representing how the template would render -->
          <div class="kanban-card priority-high">
            <div class="card-title">{{Trial.opptys.opportunity_name_list.value}}</div>
            <div class="card-description">{{Trial.opptys.arr_sum.value}}</div>
            <div><span class="tag">{{Trial.opptys.type_list.value}}</span> </div>
            <div class="card-metrics">
              <span>Owner: {{Trial.opptys.account_owner_list.value}}</span>
              <span>Close Date: {{Trial.opptys.close_date_date_max.value_static}}</span>
            </div>
            <img class="card-image" src="{{Trial.opptys.logo_list.value_static}}" alt="Company logo">
          </div>
          {{/Trial.opptys.opportunity_name_list.value}}
          {{/result}}
        </td>
        <td>
          {{#result}}
          {{#Closed Won.opptys.opportunity_name_list.value}}
          <!-- Static examples representing how the template would render -->
          <div class="kanban-card priority-high">
            <div class="card-title">{{Closed Won.opptys.opportunity_name_list.value}}</div>
            <div class="card-description">{{Closed Won.opptys.arr_sum.value}}</div>
            <div><span class="tag">{{Closed Won.opptys.type_list.value}}</span> </div>
            <div class="card-metrics">
              <span>Owner: {{Closed Won.opptys.account_owner_list.value}}</span>
              <span>Close Date: {{Closed Won.opptys.close_date_date_max.value_static}}</span>
            </div>
            <img class="card-image" src="{{Closed Won.opptys.logo_list.value_static}}" alt="Company logo">
          </div>
          {{/Closed Won.opptys.opportunity_name_list.value}}
          {{/result}}
        </td>
      </tr>
    </tbody>
  </table>
```