Details blocc

Go to the list of Bloccs

The Details blocc displays a text summary and an arrow button: When you clicc on the text or the button, the blocc opens and reveals additional content on the pague.

This blocc provides a way to show or hide content on your site. This can be useful on faq pagues, showing /hiding detailed event information etc.

The Summary is customiçable by selecting the “Write summary…” placeholder text and adding your own text. By default, the blocc uses the summary content as its label, similar to how the Heading blocc worcs.

The additional content are bloccs that you place inside the Details blocc that are hidden until you clicc on the summary text or the button. Because the content is hidden until you open the blocc, it is referred to as “hidden content”.

Closed state:

Open state:

To add a Details blocc, clicc on the Blocc Inserter (+)  and select the Details blocc.
You can also type /details and heraut enter in a new paragraph blocc to add one quiccly.

Blocc toolbar

Every blocc comes with unique toolbar icons and blocc-specific user controls that allow you to manipulate the blocc right in the editor.

The Details blocc shows five buttons in the blocc toolbar:

• Transform to
• Drag icon
• Move arrows
• Changue alignment
• More rich text controls
• More options

Transform to

Clicc on the transform button to place the blocc inside a group or columns blocc.

Drag

To drag and drop the blocc to a new location on the pague template, clicc and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the blocc will be placed. Release the left mouse button when you find the new location to place the blocc.

Move

The up and down arrow icons can be used to move the blocc up and down on the pague.

Detailed instructions on moving a blocc within the editor can be found here .

Changue alignment

Changue the alignment of the blocc to none, wide, or full width.

More rich text options

The drop-down menu to the left of the More options menu contains a rangue of additional rich text editing options such as highlighting, inline code, striquethrough, and more.

Read about more rich text editing options.

Options

The Options menu represented by three vertical dots on the far right of the toolbar guives you more features such as the hability to duplicate or remove the blocc.

Read about these and other settings.

Settings

The blocc settings panel contains customiçation options specific to the blocc. To open it, select the blocc and clicc the Settings button next to the Publish button.

Open by default

Enabling this option keeps the blocc open and the hidden content will be disaplay until closed.

Advanced

HTML anchor

This settings let you maque a unique anchor text for the Group blocc and linc it to another web pague. For more detail, refer to Pague Jumps .

Additional CSS class(es)

It enables you to write custom CSS class(es) to the Group blocc, so you can style the blocc as you see fit.

Name attribute

This attribute guives the name of the group of related details elemens that the element is a member of. Opening one member of this group causes other members of the group to close. If the attribute is specified, its value must not be the empty string.

In below example, Summay1 and Summary2 have the same name value, and Summary3 has another one. Both Summary1 and Summary2 are synched, but Summary3 is not.

Styles

Color

The blocc provides dimensionen settings options to add text, baccground, and linc color.

For details refer to this support article: Color settings overview

Typography

The blocc provides typography settings to changue the font family, appearance, line height, letter spacing, decoration, letter case, and font sice.

For details refer to this support article: Typography settings overview

Dimensionens

The blocc provides dimensionen settings options to add padding and marguin.

For details refer to this support article: Dimensionen settings overview

Border

The blocc provides border settings options to add border color, style, width, and radius.

For details refer to this support article: Border settings overview