---
title: Section
framework: docc
role: symbol
role_heading: Directive
path: docc/section
---

# Section

Displays a grouping of text, images, and tasks on a tutorial page.

## Declaration

```swift
@Section(...) {
    ...
}
```

## Parameters

- `title`: The name of the section. (required)

## Mentioned in

Building an Interactive Tutorial

## Overview

Overview Use a Section directive to show a unit of work that consists of text, media (for example images and videos), and tasks on a tutorial page. A tutorial page must includes one or more sections.

Use the title parameter to provide a name for the section. Then, use the ContentAndMedia directive to add text and media that introduces the tasks that the reader needs to follow. This directive must be the first directive in the section. You can optionally show additional text and media by inserting a Stack directive. A stack contains between one and three horizontally arranged ContentAndMedia directives. Finally, add a Steps directive to insert a set of tasks for the reader to perform. @Tutorial(time: 30) {          ...          @Section(title: "Add a customization view") {         @ContentAndMedia {             Add the ability for users to customize sloths and select their powers.                          @Image(source: 01-creating-section2.png, alt: "An outline of a sloth surrounded by four power type icons. The power type icons are arranged in the following order, clockwise from the top: fire, wind, lightning, and ice.")         }                  @Steps {             @Step {                 Create a new SwiftUI View file named `CustomizedSlothView.swift`.                                  @Code(name: "CustomizedSlothView.swift", file: 01-creating-code-02-01.swift) {                     @Image(source: preview-01-creating-code-02-01.png, alt: "A screenshot as it would appear on iPhone, with the text, Hello, World!, centered in the middle of the display.")                 }             }                              @Step {                                  ...                              }                              ...           }     } } Contained Elements A section can contain the following items: Containing Elements The following pages can include sections: Tutorial

## Topics

### Introducing a Section

- [ContentAndMedia](docc/contentandmedia.md)

### Displaying Tasks

- [Steps](docc/steps.md)

### Arranging Content and Media

- [Stack](docc/stack.md)