Repository: directus/directus
File: app/src/layouts/kanban/kanban.vue (Vue)

Code before:
											<render-display
												v-if="titleFieldConfiguration"
												:collection="collection"
												:value="element.title"
												:type="titleFieldConfiguration.type"
												:field="layoutOptions?.titleField"
												:display="titleFieldConfiguration.meta?.display"
												:options="titleFieldConfiguration.meta?.display_options"
												:interface="titleFieldConfiguration.meta?.interface"
												:interface-options="titleFieldConfiguration.meta?.options"
											/>
										</div>
										<img v-if="element.image" class="image" :src="element.image" />
										<div class="text">
											<render-display
												v-if="element.text && textFieldConfiguration"
												:collection="collection"
												:value="element.text"
												:type="textFieldConfiguration.type"
												:field="layoutOptions?.textField"
												:display="textFieldConfiguration.meta?.display"
												:options="textFieldConfiguration.meta?.display_options"
												:interface="textFieldConfiguration.meta?.interface"
												:interface-options="textFieldConfiguration.meta?.options"
											/>
										</div>
										<display-labels
											v-if="element.tags"
											:value="element.tags"
											:type="Array.isArray(element.tags) ? 'csv' : 'json'"
										/>
										<div class="bottom">
											<display-datetime
												v-if="element.date"
												format="short"
												:value="element.date"
												:type="element.dateType"
											/>
											<div class="avatars">
												<span v-if="element.users.length > 3" class="avatar-overflow">
													+{{ element.users.length - 3 }}
												</span>
												<v-avatar
													v-for="user in element.users.slice(0, 3)"
													:key="user.id"
													v-tooltip.bottom="`${user.first_name} ${user.last_name}`"
													class="avatar"
												>
													<v-image v-if="user.avatar && parseAvatar(user.avatar)" :src="parseAvatar(user.avatar)" />
													<v-icon v-else name="person" />
												</v-avatar>

Review comment (suggestion):
With the above in mind of combining the fieldConfigurations into a single computed var, then we could render both of these with a single v-for loop 🤔 

The <img> currently sits between them, but I think the CSS is such that we can move it below without affecting the layout.

Code after:
								:model-value="group.items"
								group="items"
								draggable=".item"
								:disabled="selectMode"
								:animation="150"
								:sort="sortField !== null"
								class="items"
								item-key="id"
								@change="change(group, $event)"
							>
								<template #item="{ element }">
									<div
										class="item"
										:class="{ selected: selection.includes(element[primaryKeyField?.field]) }"
										@click="onClick({ item: element, event: $event })"
									>
										<div v-if="element.title" class="title">
											<render-display
												v-if="fieldDisplay.titleField"
												v-bind="fieldDisplay.titleField"
												:value="element.title"
											/>
										</div>
										<img v-if="element.image" class="image" :src="element.image" />
										<div v-if="element.text" class="text">
											<render-display
												v-if="fieldDisplay.textField"
												v-bind="fieldDisplay.textField"
												:value="element.text"
											/>
										</div>
										<display-labels
											v-if="element.tags"
											:value="element.tags"
											:type="Array.isArray(element.tags) ? 'csv' : 'json'"
										/>
										<div class="bottom">
											<display-datetime
												v-if="element.date"
												format="short"
												:value="element.date"
												:type="element.dateType"
											/>
											<div class="avatars">
												<span v-if="element.users.length > 3" class="avatar-overflow">
													+{{ element.users.length - 3 }}
												</span>
												<v-avatar
													v-for="user in element.users.slice(0, 3)"
													:key="user.id"
													v-tooltip.bottom="`${user.first_name} ${user.last_name}`"