# Blade sections
You can easily use Blade sections to customize your pages. There are two ways to use blade sections:
* When you [override a view](/doc/customize-your-application/overriding.md#override-a-view) and create a new blade file.
* Modifying Uccello layout located at `resources/views/layouts/uccello.blade.php`.
## Common sections
Here the list of blade sections common to all uccello pages:
### Page title
```php
// @yield('title', config('app.name', 'Uccello'))
@section('title', 'My custom page title')
```
### Page name
{% hint style="info" %}
This is principally used by JavaScript for doing lazy loading.
{% endhint %}
```php
//
@section('page', 'index')
```
### Page meta
{% hint style="info" %}
Useful to configure some parameters to use with JavaScript and jQuery!
{% endhint %}
```php
@section('extra-meta')
@append
```
### Favicon
```php
//
@section('favicon')
{{ asset('images/my-favicon.png') }}
@endsection
```
### Base href
```php
@section('base-href')@endsection
```
### Logo
```php
// The link and the image
@section('brand-logo')
@section('logo'){{ Html::image(ucasset('images/logo-uccello-white.png'), null, ['style' => 'max-width: 150px;']) }}@show
@endsection
// Only the image
@section('logo')
{{ Html::image(asset('images/my-logo.png'), null, ['style' => 'max-width: 150px;']) }}
@endsection
```
### CSS files
```php
// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('css')
{!! Html::style(mix('css/app.css')) !!}
@append
// For specific pages. Thanks to an overriding.
@section('extra-css')
{!! Html::style(mix('css/specific.css')) !!}
@append
```
### CSS classes
```php
//
@section('body-extra-class', 'class1 class2')
```
### Pre-content
{% hint style="info" %}
This is where page header, menu, sidenav, loader... are defined.
{% endhint %}
```php
@section('pre-content')
{{-- @include('uccello::layouts.partials.loader') --}}
@include('uccello::layouts.partials.header.main')
@include('uccello::layouts.partials.sidenav.main')
@endsection
```
### Content container
```php
@section('content-container')
// id="app" can be used by Vue JS
@section('content-class', 'class1 class2')
```
### Content
{% hint style="info" %}
Even if `extra-content` section is not necessary, it can be used to add for example some HTML code at the bottom of the page (e.g. modal content).
{% endhint %}
```php
@section('content')
My page content
@endsection
@section('extra-content')
Extra content
@endsection
```
### Post-content
{% hint style="info" %}
Add custom code after `...`.
{% endhint %}
```php
@section('post-content')
Some code
@endsection
```
### Translations
{% hint style="info" %}
This blade section is useful to add translations used by JavaScript. You could for example use the [thepinecode/i18n](https://github.com/thepinecode/i18n) library and add your translations to the page using this section.
{% endhint %}
```php
@section('translations')
@translations('my_translations')
@endsection
```
### JavaScript files
```php
// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('script')
{!! Html::script(mix('js/app.js')) !!}
@append
// For specific pages. Thanks to an overriding.
@section('extra-script')
{!! Html::script(mix('js/specific.js')) !!}
@append
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://uccello.gitbook.io/doc/customize-your-application/blade-sections.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.