Example Event

This is the example event meant to showcase all available features. Please, do not modify, delete nor publish it. Use the blue preview button to display the page.

Components are inserted into so called Strapi Dynamic Zone that allows to build pages by adding different types of content blocks, one after another, or even to repeat one component multiple times on a single page. It's a flexible area where various kinds of components can be added - such as text, images or lists - and be arranged in the desired order. These blocks can be mixed to create unique page layouts, without needing any technical knowledge or fixed page structure. The following components can be used:

• Agenda - Displays a list of agenda items divided into tabs, with one tab per day, based on the start date of each agenda item. A publication can be assigned to an agenda item, and information will be pulled from it, so it does not need to be filled in manually. A list of selected people can also be attached to each item. People can be created, updated, and deleted on the dedicated Person type page.

• Feature Collection - Displays a list of items, each containing a title, a description, and a link.

• Horizontal Rule - Inserts a horizontal rule between two components to visually separate them.

• Image Gallery - Displays a composition of images with a title and a description.

• Mediacenter Video - Displays a video player for a video uploaded to IBM Mediacenter.

• Project Card List - Displays the list of selected projects, which can be created, updated and deleted on the dedicated Project type page.

• Publication List - Displays a list of selected publications. This component can be used only once on each page.

• Research Area Custom - Displays a generic component with a title, a description, a link, an associated IBMer and a list of projects. Markdown syntax can be used in the description of this component.

• Resource Cards - Displays a list of resources ordered from the newest. Resources can be either custom external resources or a selected posts from the blog. This component can be used only once on each page.

• Spacing - Inserts custom spacing between two components to visually separate or group them. By default, components are separated by medium spacing. Usually, an x-small spacing should be added as the first component in the dynamic zone to align the title of the first component with the table of contents, but this does not need to be followed in justified use cases.

• Speakers - Displays the list of selected people, which can be created, updated and deleted on the dedicated Person type page.

• Text Block - Displays a generic text component with an image, a title, a description, and a link. Markdown syntax can be used in the description of this component.

Search Engine Optimization (SEO) can be customized using the dedicated “SEO” field. This allows you to override the following properties:

• Title - defaults to the event name, location and attendance type
• Image - defaults to the event image
• Description - defaults to the text of the first text block component

In addition, each of these properties can be customized per social network (Facebook and X) using the “Social” field.

In general, the SEO field should only be used when different values are required (for example, shorter texts or smaller images). Using the same values as those on the main page will have no effect.

Markdown is a lightweight markup language used to format plain text in a simple, readable way. It can be used in the text content of various components. The following text elements can be used:

• Paragraphs
• Inline elements
• Thematic breaks
• Code blocks
• Block quotes
• Lists
• Tables
• Math
• Details disclosures

Paragraphs are the basic Markdown block elements.

Paragraphs are created by separating lines of a text with a blank line. Inserting a single new line inside paragraph won't crate a new paragraph.

Paragraphs are the basic Markdown block elements.

Paragraphs are created by separating lines of a text with a blank line.
Inserting a single new line inside paragraph won't crate a new paragraph.

There are two types of text emphasis: strong emphasis (bold font weight) and regular emphasis (italic type).

Strikethrough marks any text that is deleted or is no longer valid.

Subscripts and superscripts can be added: t_avg, H₂0, 3^rd, x², ...

Various types of URL links can be inserted: the external link to another website, the internal link to the same website, the hashtag link to a heading on the same page. The link with the title can be used with any of those types, hover the mouse over it to see the title. External links can be inserted into the text directly: https://www.ibm.com

Inline code will be displayed in the monospaced font.

Adding the backslash character at the end of the line will create the line
break.

**strong emphasis**

_regular emphasis_

~~Strikethrough~~

[external link](https://www.ibm.com)

[internal link](/blog)

[hashtag link](#inline-elements)

[link with the title](https://www.ibm.com 'The title text')

https://www.ibm.com

`Inline code`

line\
break

Inline elements can also be defined with HTML syntax, that can be inserted into the Markdown text. Markdown syntax should be used wherever it's possible. Use HTML syntax only for cases where Markdown doesn't provide an alternative (e.g. subscripts), or when the container needs to be defined in HTML (e.g. HTML tables).

<strong>strong emphasis</strong>

<em>regular emphasis</em>

<del>Strikethrough</del>

<sub>Subscript</sub>

<sup>Superscript</sup>

<a href="https://www.ibm.com">external link</a>

<a href="/blog">internal link</a>

<a href="#inline-elements">hashtag link</a>

<a href="https://www.ibm.com" title="The title text">link with the title</a>

<code>Inline code</code>

line<br />break

Thematic break creates the horizontal divider that represents a change of scene in a story or a shift of a topic within a section. Thematic breaks are called horizontal rules in HTML.

The paragraph before the thematic break.

The paragraph after the thematic break.

The paragraph before the thematic break.

---

The paragraph after the thematic break.

Code blocks allow for multiple lines of the monospaced font to be displayed. To add a code block, place ``` on the line before the content and another ``` on the line after the content.

Optionally, captions can be added to code blocks. To do so, the language ID (e.g. python) must be included immediately after the backticks on the first line. If the content isn't in any programming language, use text as the language ID. The caption can be inserted after the language ID separated by a space.

Code block content

```text Code block caption
Code block content
```

Block quotes are created by adding > and a space in front of a paragraph.

Block quotes can contain multiple paragraphs. Add a > on the blank lines between the paragraphs.

Block quotes can contain not only paragraphs but also other blocks like headings, lists and even other block quotes. Add > > characters in front of the quoted content to nest it. Additional nesting levels can be added by repeating the pattern.

The first quoted paragraph.

The second quoted paragraph.

The quoted paragraph on the 2nd level.

The quoted paragraph on the 3rd level.

This paragraph is back on the 1st level.

> The first quoted paragraph.
>
> The second quoted paragraph.
>
> > The quoted paragraph on the 2nd level.
> >
> > > The quoted paragraph on the 3rd level.
>
> This paragraph is back on the 1st level.

Unordered lists

• Create the unordered list by starting the line with - and a space.
• Sub-lists are made by indenting 2 spaces:
  • This is the item on the 2nd level.
  • Indent by 2 more spaces to increase the sub-list level:
    • This is the item on the 3rd level.
• This item is back on the 1st level.

- Create the unordered list by starting the line with `-` and a space.
- Sub-lists are made by indenting 2 spaces:
  - This is the item on the 2nd level.
  - Indent by 2 more spaces to increase the sub-list level:
    - This is the item on the 3rd level.
- This item is back on the 1st level.

• Include an empty line between 2 list items to make the list spaced.

• This is the 2nd list item.

  Another paragraph can be added to the list item by indenting it by 2 spaces.

• This is the 3rd list item.

- Include an empty line between 2 list items to make the list spaced.

- This is the 2nd list item.

  Another paragraph can be added to the list item by indenting it by 2 spaces.

- This is the 3rd list item.

Ordered lists

1. Create the ordered list by starting the line with 1. and a space.
2. Start the second line with 2. etc.
3. Sub-lists are made by indenting 3 spaces:
   1. This is the item on the 2nd level.
   2. Indent by 3 more spaces to increase the sub-list level:
      1. This is the item on the 3rd level.
4. This item is back on the 1st level.

1. Create the ordered list by starting the line with `1.` and a space.
2. Start the second line with `2.` etc.
3. Sub-lists are made by indenting 3 spaces:
   1. This is the item on the 2nd level.
   2. Indent by 3 more spaces to increase the sub-list level:
      1. This is the item on the 3rd level.
4. This item is back on the 1st level.

1. Include an empty line between 2 list items to make the list spaced.

2. This is the 2nd list item.

   Another paragraph can be added to the list item by indenting it by 3 spaces.

3. This is the 3rd list item.

1. Include an empty line between 2 list items to make the list spaced.

2. This is the 2nd list item.

   Another paragraph can be added to the list item by indenting it by 3 spaces.

3. This is the 3rd list item.

1. Alternatively, start all lines with 1. to auto-generate the numbers.
2. This is the 2nd list item.
3. This is the 3rd list item.

1. Alternatively, start all lines with `1.` to auto-generate the numbers.
1. This is the 2nd list item.
1. This is the 3rd list item.

57. The list can be started with a number other that 1..
58. This is the 2nd list item.

57. The list can be started with a number other that `1.`.
58. This is the 2nd list item.

Task lists

• Create the task item by adding [ ] and a space after the item bullet.
• Create the checked task item by adding [x] and a space.
• Sub-lists are made by indenting 2 spaces:
  • This is the item on the 2nd level.
  • Indent by 2 more spaces to increase the sub-list level:
    • This is the item on the 3rd level.
• This item is back on the 1st level.

- [ ] Create the task item by adding `[ ]` and a space after the item bullet.
- [x] Create the checked task item by adding `[x]` and a space.
- [ ] Sub-lists are made by indenting 2 spaces:
  - [ ] This is the item on the 2nd level.
  - [x] Indent by 2 more spaces to increase the sub-list level:
    - [ ] This is the item on the 3rd level.
- [ ] This item is back on the 1st level.

Mixed lists

• Different list types can be used on each list level.
• This is the unordered list item.
• Task items can be added to any item.
• Checked task items can be also added.
• Sub-lists are made by indenting 2 spaces:
  1. This is the ordered list item on the 2nd level.
  2. Task item can be also added to ordered lists, but it isn't common.
  3. Checked task items can be also added.
  4. Sub-lists are made by indenting 3 spaces:
     • This is the unordered list item on the 3rd level. It's indented by 2 + 3 = 5 spaces
  5. This item is back on the 2nd level.
• This item is back on the 1st level.

- Different list types can be used on each list level.
- This is the unordered list item.
- [ ] Task items can be added to any item.
- [x] Checked task items can be also added.
- Sub-lists are made by indenting 2 spaces:
  1. This is the ordered list item on the 2nd level.
  2. [ ] Task item can be also added to ordered lists, but it isn't common.
  3. [x] Checked task items can be also added.
  4. Sub-lists are made by indenting 3 spaces:
     - This is the unordered list item on the 3rd level. It's indented by
       `2 + 3 = 5` spaces
  5. This item is back on the 2nd level.
- This item is back on the 1st level.

There are two basic types of the tables syntax, that can be used: Markdown and HTML. Markdown syntax is brief but limited. HTML syntax is lengthy but offers additional features.

Markdown tables

Markdown tables always have exactly one row of cells in the head. Cells in the body are striped.

Horizontal alignment of the table can be set to individual columns by using special patterns that separate the head and the body of the table: :-- left, --: right, :-: center, --- head to center and body to left. For better readability, the number of dashes in these patters can be increased.

| Name     | Surname   | Grade | Points |
| -------- | :-------- | :---: | -----: |
| Jane     | Jackson   |   A   |   1037 |
| Jack     | Johnson   |   C   |    602 |
| ~~Jill~~ | ~~Jones~~ | ~~F~~ | ~~98~~ |

HTML tables

HTML tables support all features of Markdown tables with some additional extras. Number of rows in a head of a table is unlimited. It can be missing altogether.

Horizontal alignment of a table can be set to individual cells by using data-align attribute with values: left, right and center. Without this attribute, header cells (<th>) will be aligned to center and data cells (<td>) will be aligned to the left.

Table cells can span multiple rows or columns by adding rowspan or colspan to their attributes. Value of these attributes equals the number of rows or columns to be spanned. Adding rowspan to some cell in the body of a table, will disable the striping of that table.

Only inline elements can be added to HTML table cells and only HTML syntax can be used for those elements. All Markdown elements have their alternative in HTML syntax. See the inline elements section for more information.

<table>
  <thead>
    <tr>
      <th colspan="2">Person</th>
      <th data-align="center" rowspan="2">Grade</th>
      <th data-align="right" rowspan="2">Points</th>
    </tr>
    <tr>
      <th>Name</th>
      <th data-align="left">Surname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td data-align="left">Jackson</td>
      <td data-align="center">A</td>
      <td data-align="right">1037</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td data-align="left">Johnson</td>
      <td data-align="center">C</td>
      <td data-align="right">602</td>
    </tr>
    <tr>
      <td><del>Jill</del></td>
      <td data-align="left"><del>Jones</del></td>
      <td data-align="center"><del>F</del></td>
      <td data-align="right"><del>98</del></td>
    </tr>
  </tbody>
</table>

Math expressions can be inserted using KaTeX syntax, which is almost identical to LaTeX syntax. See the list of supported functions and the online editor.

Inline math

Inline math like $E = mc^2$ can be added to text paragraphs and other block elements by placing a dollar sign before and after the KaTeX math expression.

$E = mc^2$

Alternatively, the HTML syntax can be also used, if Markdown syntax wouldn't be available. See inline elements for more details.

<span class="math math-inline">E = mc^2</span>

Block math

Block math allows multiple lines of math expressions to be displayed and horizontally centered. To add block math, place $$ on the line before the math expression and another $$ on the line after the expression.

$$
f(\relax{x}) = \int_{-\infty}^\infty
    \hat f(\xi\,)e^{2 \pi i \xi x}
    \,d\xi
$$

Details disclosures allow to add a content that is hidden by default. They create a toggle button that users can use to expand or collapse the content. To add the details disclosure, include :::details on the line before the content and ::: on the line after the content. An extra empty line can be included for a better readability and third-party editor support. The content should consist of one or more: paragraphs, thematic breaks, code blocks, block quotes, lists, tables and math blocks. Inline elements can be also used inside the content.

• Details

  This is an ordinary paragraph which includes the strong emphasis.

  • The first item of the unordered list.
    1. The first item of the nested ordered list.
    2. The second item of the nested ordered list.
  • The second item of the unordered list.

:::details

This is an ordinary paragraph which includes the **strong emphasis**.

- The first item of the unordered list.
  1. The first item of the nested ordered list.
  2. The second item of the nested ordered list.
- The second item of the unordered list.

:::

The label of the toggle button can be customized by adding ::summary followed by the label in square brackets [] into the content of the details disclosure. Inline elements can be used inside the label.

• This is a custom toggle button label with the strong emphasis

  This is a paragraph inside the content.

:::details

::summary[This is a custom toggle button label with the **strong emphasis**]

This is a paragraph inside the content.

:::

Multiple details disclosures can be grouped together by including them one after another.

• The first details disclosure

  The content of the first details disclosure.

• The second details disclosure

  The content of the second details disclosure.

• The third details disclosure

  The content of the third details disclosure.

:::details

::summary[The first details disclosure]

The content of the first details disclosure.

:::

:::details

::summary[The second details disclosure]

The content of the second details disclosure.

:::

:::details

::summary[The third details disclosure]

The content of the third details disclosure.

:::