Safety Data Accordion Widget

Safety Data Accordion Widget

Last updated 02.18.25

The Safety Data Accordion Widget lists large numbers of Safety Data Sheet PDF documents automatically in rows and columns in an accordion format. This allows for a large number of text links to the PDFs to display in an efficient and tidy manner. While initially developed specifically for Safety Data Sheet (SDS) PDFs, the Safety Data Accordion widget can be repurposed for linking to other large numbers of documents. 

The Safety Data Accordion widget functions only when documents are added to the Safety Data Application. This application helps create the database of documents and manage their categories. 

Related Links & Videos

Add Safety Data Accordion widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Safety Data Accordion widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Safety Data Accordion Widget Properties

5.  In the Safety Data Accordion properties pop up, update many properties including items per row, margins, padding, background color and header.
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Safety Data Accordion Widget

Hover over the Site Map Atlas widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Safety Data Accordion Widget

Hover over the Site Map Atlas widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Safety Data Accordion Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
TitleType in optional header text above the accordion
Category Order BySelect from:
• Category Name in ascending order
• Category Name in descending order

Items Order By

Select from:
• Items in ascending order
• Items in descending order

Enable BackgroundCheck to enable background color
Background Color The background color attribute effects the color behind the accordion and the full-width of the page Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Background colors that can be selected:

• Default (None) 
• Primary 
• Primary Color - Light 
• Primary Color - Dark 
• Secondary 
• Secondary - Light 
• Secondary - Dark 
• Gradient 
• White 
• Light Gray 
• Medium Gray 
• Dark Gray 
• Black 
• Custom (enter color in hex format – ex. #2c6090)
MarginUse margin to increase spacing between the Safety Data Accordion widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the feature callout background area 
Bottom
User can select from 1-5 rems to increase spacing below the feature callout background area 
Right
User can select from 1-5 rems to increase to the right of the feature callout background area 
Left
User can select from 1-5 rems to increase spacing to the left of the feature callout background area 
PaddingUse padding to increase spacing between the Safety Data Accordion widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the feature callout background area 

Bottom
User can select from 1-5 rems to increase spacing below the feature callout background area 

Right
User can select from 1-5 rems to increase to the right of the feature callout background area 

Left
User can select from 1-5 rems to increase spacing to the left of the feature callout background area

Items per Row (large screens)Organizes titles of each item in columns across the page for efficient use of space in desktop view. Number dependent on length of titles. Test on devices for readability.
• Large Screens
• Medium Screens
• Small Screens
Content BeforeText entry area for simple title and descriptive copy right above the accordion. Requires small amount of HTML code for styling.
Content AfterText entry area for simple descriptive copy right below the accordion. Requires small amount of HTML code for styling.
Simple HTML Code

To BOLD text: <b>Lorem ipsum dolor sit amet consectetur</b>

For ITALIC text: <em>Lorem ipsum dolor sit amet consectetur</em>

To add a HORIZONTAL RULE: <hr>

To add a BREAK: Lorem ipsum dolor sit amet consectetur <br>

Lorem ipsum dolor sit amet consectetur

Example

Safety Data Sheets

Cenex Products