Regional University Computing Center Kaiserslautern-Landau

Content element "Infobox"

Instructions with exercise

About the content element

The design of the info box conveys to visitors that there is information here that they should take note of.

Depending on the choice of color and icon , the visitor understands the importance of the information.

This is particularly easy if the info box is used throughout the website in accordance with its purpose.

  • The choice of color for the info box refers to the frame and the background of the icon at the top left
  • The background is always white
  • Images are displayed for reasons of compatibility with old content, but are often not useful

Usage:

  • Supplements the page content
  • for notes, warnings, temporary events
  • H4 or H5 headings should be used (note: technical restrictions will probably apply)
  • with little text, possibly with a link to further information
  • without images
  • it is recommended to use only one info box per page
  • the info box should be rather small

This is what it looks like

Live view of the content item

Important

Use the info box:

  • for notes e.g. in green/red/pink
  • for marginal notes e.g. in light blue or green-grey
Step by step

Illustrated instructions

Step 1: Creating an info box

To create the element, click on the "+ content icon" in the editing area of the target page. Then select the "Infobox" element under the "Text" tab. The editing menu for the element will then open automatically.

Step 2: Creating the content

First assign a heading under the "General" tab. Then define the type/layout of the heading. The headings H4 and H5 are useful as marginal information in info boxes.

Now create the desired content of the info box at the bottom of the text editor. Please note that the length of the content also influences the size of the info box.

Step 3: Selecting the icon (optional)

To select an icon, which is displayed in the top left-hand corner of the info box, click on the field under the "Icon" lettering in the "General" tab. A drop-down menu then opens in which you can select an icon for the info box. As soon as you have selected an icon, a corresponding preview image will appear in the box next to the field. You can find an overview of the available icons with preview images on the Fontawesome website.

If no icon is selected for the info box, the "info" icon is used by default.

Step 4: Selecting the frame color (optional)

To specify a frame color for the info box, first go to the "Appearance" tab. There, select the desired frame color in the "Background color" area.

If no frame color is selected for the info box, the frame color "light-green" is used by default.

TYPO3 self-study

Exercise

  1. Create an info box.
  2. Think about a hint that you would possibly put in a green box.
  3. Write this note in the info box and set the color to green.
  4. Make sure that the heading level is H4/H5.
  5. Think of a hint that you would put in a red box.
  6. Think of a note that would be useful in a blue or blue-grey box.
To the sandbox

Let's continue

Find your next topic in the overview