Blocks are the core building elements used to create structured, engaging pages in the Content Designer.
While each block has its own purpose and a block-specific contextual toolbar, most blocks share these common actions to allow intuitive content management across your page:
- Edit: Use the pencil icon to update:
- Content
- Design
- Visibility
- Duplicate: Use the duplicate page icon to create a copy of a block.
- Delete: Use the trash icon to remove a block from the page.
By combining different types of blocks, you can structure pages that guide employees, highlight key information, and support your internal communication goals.
Blocks are organized into different categories, each designed to serve a specific function.
Text Blocks
With text blocks, you can add content and format it using the following formatting options in the contextual toolbar:
- Text style
- Alignment
- Superscript and subscript
- Font color
- Emojis
- Profile tags
Title
A Title block defines the main heading of a page. Once you add a Title block to your page, click it to replace the placeholder text with your own content. A Title looks the same as a Heading, but it is always rendered as an H1. This ensures clear page structure and supports accessibility. You can choose between the three title sizes: big, medium, and small. You can also use the other text formatting options in the contextual toolbar . Use the Title block only for the main heading of the page. Use Heading blocks (H2–H4) to structure the remaining content. A page can have only one title, so the duplicate option is not available for this block.
Text
The Text block allows you to add and format text on your page. It combines headings and paragraphs in a single block, allowing you to structure and format content flexibly.
You can choose between different text styles, such as big, medium, or small headings, as well as paragraph text. The contextual toolbar includes formatting options like bold, italics, strikethrough, alignment, color, links, lists, quotes, superscript, subscript, emojis, and profile tags.
You can also add @mentions and #hashtags to reference people or topics. You can change styles at any time, remove formatting, and duplicate or delete the block as needed.
Media and Assets Blocks
Media and asset blocks help you enrich your content with visuals and supporting materials. They make pages more engaging and easier to understand.
You can use these blocks to add images, videos, and documents that support your message and break up text-heavy sections. They help you present information clearly, provide additional context, and guide users through content visually.
Image
The Image block allows you to add images to your page. You can use it to support your content visually, highlight key messages, or create visual separation between sections.
You can resize images directly in the editor by dragging the corners. You can also add captions and alt text to improve clarity and accessibility. When you edit, the following options are available:
-
Content tab:
- Add Image: Add the image you want to display
- Position: Set the alignment of the image
- Caption: Add a caption
- Alt Text: Add alt text for people using screen readers or slow internet
- Target URL: Add a URL you might want to link the image to
- Open in Browser (Mobile): Open the link in the device’s default browser
- Visibility tab: Control where and to whom the block is shown.
Video
The Video block allows you to embed videos on your page. You can use it to explain topics, share updates, or provide engaging content in a more dynamic format. When you edit, the following options are available:
-
Content tab:
- Source: Choose a video from My Files or embed a URL. You can also add a thumbnail.
- Add Video: Add the video content for the page
- Position: Set the alignment of the video
- Caption: Add a caption
- Visibility tab: Control where and to whom the block is shown.
Audio
The Audio block allows you to add audio files to your page. You can use it to share spoken content such as announcements or interviews. This gives users an alternative way to consume information. When you edit, the following options are available:
- Content tab: Add the audio content for the page.
- Visibility tab: Control where and to whom the block is shown.
File
The File block allows you to add documents to your page, including PDFs and other file formats. You can use it to provide additional resources or detailed information that users can view or download. When you edit, the following options are available:
- Content tab: Select the file you want to add.
- Visibility tab: Control where and to whom the block is shown.
Layout and Structure Blocks
Layout and structure blocks help you organize content clearly and guide users through a page in a logical, scannable way. You can use these blocks to separate content visually and create structured layouts. They help you present information clearly, highlight key messages, and structure longer or data-heavy content. Use these blocks to improve readability and create consistent page layouts.
Divider
The Divider block visually separates content blocks on your page. It helps improve readability and makes different sections of your page easier to distinguish.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. The Edit option allows you to update the visibility of the divider.
Accordion
The Accordion block lets you structure long or detailed information into collapsible panels. This keeps the page clean and easy to navigate. You can add multiple panels within a single accordion by selecting the parent element indicator and using the contextual toolbar to duplicate it. Users can then expand or collapse each panel as needed.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
- Design tab: Customize the background color
- Visibility tab: Control where and to whom the block is shown.
Custom
The Custom block allows you to embed custom widgets built with the Staffbase widget generator, which provides a widget SDK. If you have widgets developed and maintained in-house, such as a clock or digital business card widget, this block enables you to use these widgets in pages and supports migrating existing content that includes custom widgets.
Infobox
The Infobox block highlights important information within your page. It offers predefined color-coded layouts for four message types: information, success, warning, and critical. This helps you draw attention to notes, alerts, or key messages in a clear and visually distinct way.
Using the contextual toolbar, you can also edit, duplicate, or delete the block at any time. Selecting Edit opens the visibility tab.
Container
The Container block lets you nest containers inside columns or other containers to create more custom, complex, and flexible layouts. Containers can be nested up to two levels deep and are mainly used to structure content horizontally into columns.
Like the default container, it supports background colors and background images with optional color overlays for opacity control. The Container block must be added manually when additional nesting is needed.
Table
Use the Table block to present structured information in rows and columns. Tables improve the readability of data-heavy content such as comparisons, schedules, or lists. They display information in a clear, easy-to-scan format. Tables start with a 2×2 layout. You can add or remove rows and columns as needed. Each table cell can contain any block except Container and Table blocks.
Navigation Blocks
Navigation blocks help you guide employees to relevant content, tools, and destinations directly from your page. By using clear links and calls-to-action, these blocks make it easy for users to move between internal pages, external resources, and key workflows. Navigation blocks support consistent design, flexible layouts, and visibility controls, ensuring that the right links are shown to the right audience across devices.
Quick Link
The Quick Link block lets you add links to internal or external resources.
-
Content tab:
- Provide a URL and label.
- Indicate if you want it to open in the device’s default mobile browser.
-
Design tab:
- Card Type: Add images from My Files or icons from the icon picker.
-
Layout: Select between Tile or List layout to match your page design.
- List layout: Displays a single link as a list item, ideal when you want a simple, structured presentation.
- Tile layout: Displays a single link as a visual tile. Each tile can include an icon or image, and you can customize the background color to make the link more prominent and engaging.
-
Visibility tab: Control where and to whom the block is shown.
Button
The Button block lets you create clear calls-to-action that guide users to the destinations you define. The button colour uses the main brand color set in the Branding Page.
When you edit, the following options are available:
-
Content tab
- Layout: Button width using hug and fill options
- Position: Button alignment
- Link: Webpage linking
- Visibility tab: Control where and to whom the block is shown
When users click the button, the associated action triggers automatically, such as opening a website.
News and Social Blocks
News and social blocks allow you to show dynamic and regularly updated content directly on your pages. This keeps employees informed and engaged without manual updates. These blocks connect your pages to existing news channels and media sources. You can use them to highlight announcements, campaigns, and video content in visually rich, responsive layouts. By embedding live content such as news posts or short-form videos, you can turn pages into active communication hubs that stay relevant to audiences.
News
The News block allows you to show Staffbase news directly on your page by connecting it to a selected news page or channel. It acts as a live news segment that automatically displays the latest posts, ensuring your page stays up to date without manual updates. You can present content using the News Feed or News Stage layout and include Staffbase-hosted videos that users can play directly within their Employee App or Intranet.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
-
Content tab:
- Source: Select the News page or channel from the list.
- Show all posts button: Adjust the toggle to turn this option on or off.
- Skip posts: Set the number of posts to skip.
-
Design tab:
-
Desktop layout: Select Feed or Stage.
- Feed: Shows a chronological list of posts from the selected news channel. Each post displays headline, teaser text, and media preview (including videos). You can choose whether posts are displayed vertically or horizontally using List Direction.
- Stage: Presents posts in a visual, stage-style format for highlighting key announcements or campaigns. Choose between wide or card style.
- Total posts: Indicate the number of posts to display.
- Appearance: Select the layout style.
- Display: Choose what details to show (for example, author, channel name, or publication date).
-
Desktop layout: Select Feed or Stage.
- Visibility tab: Control where and to whom the block is shown.
Shorts
The Shorts block lets you add vertical, social-media–style videos from Media news channels to your pages. Contributors can create and publish Shorts in the Employee App or Intranet, making it easy to share engaging video content that supports communication, recognition, and storytelling.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
- Content tab: Select a News page or channel. The block displays videos in a horizontal, chronological feed for quick browsing and full-screen playback.
- Visibility tab: Control where and to whom the block is shown.
Group Subscription
The Group Subscription block lets users join or leave open groups directly from a page. This makes group-relevant content easier to find and helps employees follow topics that matter to them.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
-
Content tab:
- Group: Search for and select the group
- Button labels: Customize the join and leave button labels. The block adapts automatically based on membership. The block automatically adapts to each user: if they are not a member, it shows a button to subscribe and immediately access the group’s content; if they are already subscribed, it allows them to unsubscribe and stop seeing updates.
- Layout: Choose hug or fill layout
- Position: Select the button alignment
- Visibility tab: Control where and to whom the block is shown
Create Post
Use the Create Post block to enable employees to create posts directly from a page. It allows users to publish Update posts without navigating to a specific news channel, helping encourage more bottom-up communication. Editors can place the block on key pages, such as the homepage or an event page, to make posting easily accessible.
The block appears as an input field that users can click or tap to start creating a post.
On the Intranet, it opens a modal dialog. In the App, it opens a full-screen, mobile-optimized dialog.
After publishing, the page refreshes, and the new post appears in the pre-defined channel.
Users can create posts with rich content, including links, hashtags, @mentions, and attachments such as images or videos. The block is only visible to users who have permission to post in the connected news channel.
When you edit, the following options are available:
-
Content tab:
- Post to: Select the news channel into which the posts will be published.
- Design tab: Choose whether to display a pen icon in the input field.
- Visibility tab: Control where and to whom the block is shown.
User Profile
Use the User Profile block to display contact information outside the employee directory. For example, you can use it on a Contact Us page. If available, profile details like location, department, and job title are shown. You can choose up to two primary fields and four secondary fields. You can also select a vertical or horizontal layout, and optionally display the currently signed-in user.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
- Content tab: Select a user or the signed-in viewer’s profile.
-
Design tab:
- Layout: Select between horizontal or vertical.
- Appearance: Select between standard or card.
- Profile fields: Select the primary and secondary fields to include.
- Visibility tab: Control where and to whom the block is shown.
Integration and Apps
Integration and Apps blocks extend your pages with dynamic content and connections to external systems employees already use. These blocks let you embed tools, documents, and services directly into your pages, enabling interactive experiences, personalized information, and seamless access to third-party platforms. By using Integration and Apps blocks, you can turn pages into functional hubs that support everyday tasks, workflows, and collaboration across your intranet.
Plugin
Use the Plugin block to display plugin content, such as forms, meal plans, or event calendars, directly on a page. This allows users to interact with content, such as submitting forms or browsing weekly canteen options, without leaving the page.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
-
Content tab:
- Select a plugin from a list.
- Choose the specific item from that plugin to display on the page.
-
Design tab:
- Define the block height for desktop or mobile.
- Define whether users can scroll within the block.
- Visibility tab: Control where and to whom the block is shown.
Embedded Page
The Embedded Page block allows editors to display external websites on a page. This allows users to view external content without leaving the page.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
- Content tab: Add the target URL.
-
Design tab:
- Define the block height for desktop or mobile.
- Define whether users can interact, scroll within the block, or open the block in fullscreen mode.
- Visibility tab: Control where and to whom the block is shown.
Google Blocks
Google blocks allow you to integrate content from Google services directly into your intranet pages. By embedding calendars and files where employees already work, you can provide quick access to important information and reduce the need to switch between tools.
The Google Calendar block lets you display individual or team calendar events directly on your intranet page, giving employees quick access to their schedules and upcoming meetings. This allows users to conveniently check their schedule and join meetings without leaving the page.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
-
Content tab:
- Choose between a primary or team calendar.
- Provide the Calendar ID when needed.
- Design tab: Define the calendar height for desktop and mobile.
- Visibility tab: Control where and to whom the block is shown.
The Google Drive block allows users to access and search their Google Drive files directly from your organization’s intranet. The block is personalized for each user and automatically displays their most recently viewed files, creating a seamless connection between your Google and Staffbase platforms.
Using the contextual toolbar, you can edit, duplicate, or delete the block at any time. When you edit, the following options are available:
- Design tab: Define the height of the block on desktop or mobile.
- Visibility tab: Control where and to whom the block is shown.
Microsoft Blocks
Microsoft blocks allow you to integrate Microsoft 365 services directly into your intranet pages. By embedding files, calendars, and document libraries, you can provide seamless access to content employees already use and improve productivity.
To add a SharePoint document library or a specific folder of documents, use the Microsoft 365 Document Library block. It provides easy navigation with breadcrumb trails, search functionality, and sorting options, helping users find and access files. When you edit, the following options are available:
-
Content tab: Choose from the following dropdown menus:
- SharePoint Site
- Document Library
- Folder Path
- Default Sorting
- Visibility tab: Control where and to whom the block is shown
To display Microsoft files on a page, use the Microsoft 365 Files block. You can add document lists from Microsoft 365 and allow users to search and browse files in either list or tile view. When you edit, the following options are available:
-
Content tab:
-
Choose from the List Type dropdown:
- Trending Files
- Recent Files
- Specific Library Files
- Search-Based
You can configure further options for the selected library and search-based list types.
- Indicate the number of items to display.
-
- Visibility tab: Control where and to whom the block is shown
To display calendars, use the Microsoft 365 Calendar block. You can embed personal, shared, or group calendars so users can view events, access details, and join meetings directly from the page. When you edit, the following options are available:
- Content tab: Select a calendar type from the Calendar type dropdown. When you select Shared calendar or Group calendar, an additional field appears that lets you choose the specific calendar to display.
- Visibility tab: Control where and to whom the block is shown
To embed a single Microsoft file, use the Microsoft 365 File Viewer block. For example, you can display a PowerPoint presentation or other documents directly within the page for users to view without downloading. When you edit, the following options are available:
- Content tab: Select a file
- Visibility tab: Control where and to whom the block is shown
Tasks
To provide a central overview of assigned tasks, use the Tasks Hub block. It allows users to access and switch between different task projects, making it easier to manage work across teams and projects.
Survey Block
The Survey block allows you to collect feedback and insights directly from users. It enables you to embed an existing survey encouraging engagement through quick responses. You can use this block to gather opinions, measure sentiment, or validate decisions. Surveys help you understand your audience better and improve processes over time. When you edit, the following options are available:
- Content tab:
- Survey: Select the survey for your audience to answer.
- Visibility tab: Control where and to whom the Survey block is shown.
ServiceNow Blocks
To display an overview of ServiceNow tickets, use the ServiceNow Tickets block. Employees can view or open assigned tickets, search for tickets, or access existing tickets directly.
When editing, the following options are available:
- Content tab: Configure the type of ServiceNow services to display.
- Visibility tab: Control where and to whom the block is shown.
HR Blocks
To display absence information, use the Absence block. It includes a balance view showing available leave and a request view listing past and upcoming requests with their status. Optional notifications keep users informed about changes. Each employee only sees their own absence data.
When you edit, the following options are available:
- Content tab: Configure what absence information to show to employees.
-
View type:
- User Absence Balance: Shows different absence categories such as vacation or sick leave, along with available hours and remaining balances.
- User Absence List: Lists past and upcoming absence requests, including their status, such as approved or pending.
- Policy Type: Configure absence policy mappings based on the connected HR system. For example, Workday and SAP SuccessFactors.
- Visibility tab: Control where and to whom the block is shown.
To display employee payslips, use the Payslip block. It provides an overview of payslips by pay period and allows users to select individual payslips and securely access detailed information, including deductions and additional data (if supported by the HR system).
Data is hidden by default for privacy and must be revealed by the user. Optional notifications inform users when new payslips are available.
Control where and to whom the block is shown with the Visibility tab.
Comments
0 comments
Please sign in to leave a comment.