# Info section Add help text and info boxes to the Panel to help your editors **** - Source: **** The info section is perfect for any kind of static text that you want to place in a Panel layout. It can be used for general info, help, warnings and other guides for your editors.
## Example ```yaml title: Gallery sections: info: type: info label: Info text: | Please double-check the licenses and sources of all images before you upload them to the gallery. ``` ### Using KirbyText In addition to markdown, you can use KirbyText in your info text, even including images: ```yaml info: text: | Check out the (link: help text: help pages) for details ``` ## Section shortcuts For simple sections that are only used once per blueprint, you can use shortcuts. In its most basic form, an `info` section consists of the section type as name, and the `text` property with the information you want to show. ```yaml sections: info: text: Some text ``` Keep in mind that the same section name can only be used once per blueprint. ## Info section vs. info field The info section behaves pretty much like the info field. Why do we have both of them? Because both are useful. The info field can be placed in a field grid and is perfect to offer help within a form. The info section can be placed anywhere else, especially in layouts that don't need form fields. ## Section properties
Name Type Default Description
headline mixed null The headline for the section. This can be a simple string or a template with additional info from the parent page.
icon string null
label mixed null The label for the section. This can be a simple string or a template with additional info from the parent page. Replaces the headline prop.
text mixed null
theme string null
## Label The label will be displayed above the info section. You can pass a simple headline as a string or you can provide translations for multiple languages, if you have an international editing team. ### Single language ```yaml label: This is some very important information ``` ### Multiple languages ```yaml headline: en: Attention de: Achtung es: Attencion ``` ### Placeholders You can inject information from the current page into the headline with template placeholders using our query language. ```yaml label: "{{ page.title }} Information" ``` ## Text The text can be a simple string, Markdown, KirbyText or HTML. Just like the headline, the text can also be translated. You can also use Kirby's query language to query text from some field or show some other information. ### Single language ```yaml text: Info ``` ### Multiple languages ```yaml text: en: This is some very important information de: Das ist eine wichtige Mitteilung ``` ### Multi-line text If you want to write multi-line text with paragraphs, you have to use a special YAML syntax for it. ```yaml text: | Dear Edith, this is some multi line text with paragraphs. Cheers, A. Dmin ``` ### Text queries ```yaml text: "{{ kirby.page('somepage').text()->kt() }}" text: "{{ site.index.count }}" text: "{{ site.index.images.count }}" ``` ## Themes By default, the info section is displayed as a blue info box. You can switch the theme with the `theme` option, to match the importance or meaning of the information. The following themes are available: - `info` (default) - `positive` - `negative` - `notice` - `warning` - `passive` - `text` - `dark` - `code` - `empty` ### info ```yaml title: Gallery sections: info: type: info label: Info theme: info text: | Please double-check the licenses and sources of all images before you upload them to the gallery. ``` ### negative
```yaml title: Gallery sections: info: type: info label: Attention theme: negative text: | Please double-check the licenses and sources of all images before you upload them to the gallery. ``` ### positive
```yaml title: Gallery sections: info: type: info label: Wohooww theme: positive text: | Just upload whatever you want. We get sued anyway. ``` ### Disable theming You can disable the infobox theme entirely to show neutral text. ```yaml fields: info: type: info label: Info theme: none text: | This is a very neutral message ```

Conditional sections

Like conditional fields, sections can be shown/hidden based on the value of a given field (i.e. if a toggle is checked, a select field is at a certain option, etc.).

The condition for displaying the section is set with the when option. In the when option you define a field name as the key and the required value of that field. In the following example, the each section type is shown based on a different value of the postType field:

sections:
  content:
    type: fields
    fields:
      postType:
        type: select
        options:
          - Gallery
          - Image
          - Text
  gallery:
    type: files
    template: gallery-image
    layout: cards
    size: tiny
    when:
      postType: Gallery
  image:
    type: files
    template: single-image
    max: 1
    layout: cards
    when:
      postType: Image
  text:
    type: fields
    fields:
      text:
        type: textarea
      tags:
        type: tags
    when:
      postType: Text