Descriptions

The borderless layout matches Arco inline-horizontal; border maps to bordered. See the Element Plus docs for props.

Basic Descriptions

Labels and values share a cell without an outer border.

User details

NameAlex Morgan	CityLondon
RoleDesigner	TeamPlatform

<template>
  <el-descriptions title="User details" :column="2"  style="width: 100%">
    <el-descriptions-item label="Name">Alex Morgan</el-descriptions-item>
    <el-descriptions-item label="City">London</el-descriptions-item>
    <el-descriptions-item label="Role">Designer</el-descriptions-item>
    <el-descriptions-item label="Team">Platform</el-descriptions-item>
  </el-descriptions>
</template>

Borders

Border adds cell borders and label backgrounds.

User details

Name	Alex Morgan	City	London
Role	Designer	Team	Platform

<template>
  <el-descriptions title="User details" :column="2" border style="width: 100%">
    <el-descriptions-item label="Name">Alex Morgan</el-descriptions-item>
    <el-descriptions-item label="City">London</el-descriptions-item>
    <el-descriptions-item label="Role">Designer</el-descriptions-item>
    <el-descriptions-item label="Team">Platform</el-descriptions-item>
  </el-descriptions>
</template>

Vertical Layout

Vertical places labels above their values.

User details

Name	City
Alex Morgan	London
Role	Team
Designer	Platform

<template>
  <el-descriptions title="User details" :column="2" direction="vertical" style="width: 100%">
    <el-descriptions-item label="Name">Alex Morgan</el-descriptions-item>
    <el-descriptions-item label="City">London</el-descriptions-item>
    <el-descriptions-item label="Role">Designer</el-descriptions-item>
    <el-descriptions-item label="Team">Platform</el-descriptions-item>
  </el-descriptions>
</template>

Differences from Arco

• The current theme has a known issue with borderless vertical descriptions: labels and values bunch together. Bordered vertical layouts are unaffected. This requires a separate theme-package fix.