Classified Group Interface for Directus

A group to which a class can be assigned for custom styling.

Installation

• Official Guide
• NPM Package

Examples

Example 1: Change spacing between fields

1. Add a classified group

2. Add fields

3. Add Custom CSS in the Project Settings

4. Result

Example 2: Add a border around fields

1. Add a classified group

2. Add fields

3. Add Custom CSS in the Project Settings

4. Result

Example 3: Place fields at the top of the directus_files collection

1. Add a classified group

2. Add fields

3. Add Custom CSS in the Project Settings

4. Result