ant-design/docs/spec/detail-page.en-US.md

---
group: Design Patterns
type: Template Document
order: 3
title: Detail Page
---

Detail Pages display the complete data to users. Users can edit the information or do other operations.

## Design Goals

To increase the information viewing and searching efficiency. To raise the convenience of operation.

## Design Principles

<div class="design-inline-cards">
  <div>
    <img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3CfhSZLxsIEAAAAAAAAAAABkARQnAQ" />
    <div>
      <h4>Direct</h4>
      <p>Try to display the information as flat as possible. Do not hide or fold up the content if not necessary.</p>
    </div>
  </div>
  <div>
    <img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lN6IRbhv8fIAAAAAAAAAAABkARQnAQ" />
    <div>
      <h4>Clear hierarchy</h4>
      <p>In order to decrease the information complexity on each page, put information in levels and groups, following the principle of proximity.</p>
    </div>
  </div>
  <div>
    <img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jXDwQ6NF7dIAAAAAAAAAAABkARQnAQ" />
    <div>
      <h4>Concise</h4>
      <p>Reduce the use of complex structures, try to use similar layouts and modules to reduce the interference of structural differences to users, and let them focus on information itself.</p>
    </div>
  </div>
</div>

## Typical Templates

### Basic Layouts

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/pCRKNg9k17/1bd63a4b-d1f4-4e07-b22a-d473846ffa4c.png">
</ImagePreview>

Basic Detail Pages directly show all the information at the same level of hierarchy. We suggest such method of displaying data.

#### [Basic Detail Templates](https://preview.pro.ant.design/profile/basic)

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/mbOatwyvyE/0fb8dd2b-b0d6-4833-8eef-4b9bb403eece.png">
</ImagePreview>

Basic layout templates display the main information on one whole card, using non-column split lines to separate the content into groups.

**When to use**

To display information with less content and low complexity.

#### Document Detail Templates

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/scYc%24%24mD8l/17738081-f446-417b-9b32-a8c30de2f221.png">
</ImagePreview>

Document Detail Templates display the detailed information of approval documents. They use cards to separate the modules with complex content.

**When to use**

To display approval process and detailed approval information, as well as some approval operations.

**Related operations**

Pass, reject, transfer, sign, suspend and withdraw.

### Complex Layouts

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/B76lyJVA80/3c938d7e-06a8-464c-b70c-5b2bebfcd638.png">
</ImagePreview>

Deal with complex details in the following way: Divide information with high complexity and weak correlation into multiple parts. And put the parts into groups according to their relativities, with tabs, steps, cards, etc.

#### [Advanced Detail Templates](https://preview.pro.ant.design/profile/advanced)

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/%241vXHbjQ2A/ad454bfb-55d8-43b1-b1fb-adfbc889045c.png">
</ImagePreview>

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/O0dPbOqGT0/07b6e341-2186-4a20-bc2c-513d91d3faa8.png">
</ImagePreview>

**When to use**

When the detail page has large and complex content, it has to be split into multiple tabs to guide users to browse information.

#### Publish Process Templates

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/zMjpjg%24oaY/a9b7e996-ca9a-45d8-afbb-3c1727208629.png">
</ImagePreview>

Divide the content into steps, letting users to browse and operate step by step.

**When to use**

Such templates are suitable for developing and collaborating processes.

## Design Suggestions

#### How to choose template

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/1uy%243Y6SRp/1a6ff7f8-4cd0-483b-b8a5-c8d49c63fa92.png">
</ImagePreview>

Based on information complexity and correlation model, choose related modes to present the information, and select suitable layouts to display the contents of detail pages.

#### Separation Methods

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/gadw%26gZBCW/f8c03ba9-73ae-40f6-b687-c322ecf963cb.png">
</ImagePreview>

Conclude the closeness of each information module according to the relevance among them. Usually, the more relevant the contents are, the closer they are to each other.

- Non-column split lines: to separate relevant contents;
- Full-column split lines: to divide the content into multiple parts;
- Cards: to display information on one topic;
- Tabs: to put the information into groups according to some feature, such as version, intention, phase, etc.

#### Content Components

<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/antfincdn/J7ccrSNpjz/89878d45-ca15-4a6a-853e-3281fe02f114.png">
</ImagePreview>

Select presentation modes of the information according to its types and complexity. Abased on the complexity from low to high, the followings are available components:

## Read more

#### Related Global Rules

- [Data Format](/docs/spec/data-format)
- [Button](/docs/spec/buttons)

#### Related Modules or Components

- [Description](/components/descriptions/)
- [Collapse](/components/collapse/)
- [Table](/components/table/)

#### Reference

- [Fiori – How to Design an Object Page](https://blogs.sap.com/2017/08/06/fiori-elements-how-to-design-an-object-page/)
- [SAP Fiori 2.0: The Object Page —— Part 1: It's History](https://experience.sap.com/skillup/sap-fiori-2-0-the-object-page-part-1-its-history/)
- [Object Page Floorplan](https://experience.sap.com/fiori-design-web/object-page/)
- [Principle of Product Display in Supermarkets](https://experience.sap.com/fiori-design-web/object-page/)