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.

Example query

Example dataset

Example code

<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>