> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Section Blade component
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
Looking for the current stable version? Visit the [5.x documentation](/5.x).
## Overview
A section can be used to group content together, with an optional heading:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
## Adding a description to the section
You can add a description below the heading to the section by using the `description` slot:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
This is all the information we hold about the user.
{{-- Content --}}
```
## Adding an icon to the section header
You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a section by using the `icon` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
### Changing the color of the section icon
By default, the color of the section icon is "gray". You can change it to be `danger`, `info`, `primary`, `success` or `warning` by using the `icon-color` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
### Changing the size of the section icon
By default, the size of the section icon is "large". You can change it to be "small" or "medium" by using the `icon-size` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
User details
{{-- Content --}}
```
## Adding content to the end of the header
You may render additional content at the end of the header, next to the heading and description, using the `headerEnd` slot:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Input to select the user's ID --}}
{{-- Content --}}
```
## Making a section collapsible
You can make the content of a section collapsible by using the `collapsible` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
### Making a section collapsed by default
You can make a section collapsed by default by using the `collapsed` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
### Persisting collapsed sections
You can persist whether a section is collapsed in local storage using the `persist-collapsed` attribute, so it will remain collapsed when the user refreshes the page. You will also need a unique `id` attribute to identify the section from others, so that each section can persist its own collapse state:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
## Adding the section header aside the content instead of above it
You can change the position of the section header to be aside the content instead of above it by using the `aside` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
### Positioning the content before the header
You can change the position of the content to be before the header instead of after it by using the `content-before` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
User details
{{-- Content --}}
```
)}
Your logo here