Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Classnames are identifiers applied to HTML elements that help you target them for styling, functionality, or accessibility. When you assign a classname to an element, it allows you to customize its appearance using CSS or interact with it through JavaScript. This separation of structure and styling is a key principle of web development, enabling you to build flexible and maintainable code. By organizing your styles through classnames, you can ensure consistency across your site or application, and quickly make updates without touching the HTML structure.
Using classnames for custom CSS is a powerful way to control the visual presentation of your web application. You can define how elements like buttons, forms, or menus look across various devices and screen sizes. Classnames give you granular control over design details like colors, spacing, and fonts, allowing for a cohesive user experience. Beyond aesthetics, proper use of classnames can enhance the performance of your site by minimizing the need for inline styling, making it easier to manage and maintain.
Classnames also play a critical role in making your web application accessible. By combining CSS classnames with semantic HTML elements, you can create user-friendly experiences for diverse audiences. Screen readers and other assistive technologies rely on well-structured HTML and accessible classnames to interpret content correctly. This ensures that your application is usable by a wider audience, improving your reach and inclusivity. Accessible web design not only benefits users but also contributes to better SEO and legal compliance, making it a vital aspect of modern web development.
The following pages list both the deprecated and new classnames for Beefree SDK. Ensure you reference the following pages for the most accurate classnames.
This page lists the classnames for different buttons within the sidebar, and is for those seeking to customize or understand the styling applied to these components. You can use this information to more easily modify or enhance the user interface of your web application.
This page will cover button classnames for the following sidebar areas:
The tables in this section list the classnames for buttons within the content area of the sidebar.
This section lists the Add-on sidebar widget sub-elements and classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Button sidebar widgets and their respective deprecated and new classnames.
This section lists the Carousel sidebar widgets, sub-elements, and classnames.
This section lists the Dynamic sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Form sidebar widgets, sub-elements, and classnames.
This section lists the Icons sidebar widgets, sub-elements, and classnames.
This section lists the Image sidebar widgets, sub-elements, and classnames.
Change Image
This section lists the List sidebar widgets, sub-elements, and classnames.
This section lists the Menu sidebar widgets, sub-elements, and classnames.
This section lists the Paragraph sidebar widgets, sub-elements, and classnames.
This section lists the Social sidebar widgets, sub-elements, and classnames.
The tables in this section list the classnames for buttons within the row area of the sidebar.
Column Structure
The tables in this section list the classnames for buttons within the settings area of the sidebar.
Sub-Element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-elemet | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
Sub-element | Deprecated | New Classnames |
---|---|---|
NA
btn
btn-primary
add-on-sidebar-button--cs
NA
btn-primary
BeeButton_*
ai-sidebar-icon--cs
Special links
href-container__link
href-container__link--special-link
href-special-link--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
Add custom special link
href-container__link
href-container__link--special-link
href-custom-special-link--cs
Add new attribute
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
NA
btn
btn-primary
icon-manager__add-icon
BeeButton_*
icon-manager__add-icon--cs
Change image
NA
carousel-item-change-image--cs
Delete
NA
carousel-item-delete-image--cs
NA
btn
btn-primary
BeeButton_*
select-merge-content--cs
NA
NA
content-dialog-button--cs
Edit
field-edit
form-field-edit--cs
Delete
field-remove
form-field-delete--cs
Add new field
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
NA
btn-primary
BeeButton_*
ai-sidebar-icon--cs
Button
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
icons-add-icon--cs
Change image
btn-primary
BeeButton_*
BeeIcons_*
icons-change-icon--cs
Apply effects
btn-default
BeeButton_*
BeeIcons_*
icons-edit-icon--cs
Delete
BeeButton_*
BeeIcons_*
icons-delete-icon--cs
NA
btn
btn-image-editor
btn-default
BeeButton_*
btn-image-editor--cs
NA
btn
btn-file-picker
btn-secondary
BeeButton_*
btn-file-picker--cs
Special links
href-container__link
href-container__link--special-link
href-special-link--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
Add custom special link
href-container__link
href-container__link--special-link
href-custom-special-link--cs
Add new attribute
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
toggle-menu-button--cs
Delete
field-remove
delete-attribute--cs
NA
btn
BeeButton_beeButton*
ai-sidebar-icon--cs
NA
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
menu-items-add-button--cs
Delete
BeeButton_*
BeeMenuItems_*
menu-items-delete-button--cs
Link file
href-container__link
href-container__link--link-file
href-link-file--cs
NA
btn-primary
BeeButton_beeButton*
ai-sidebar-icon--cs
Button
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
social-add-icon--cs
Delete
icon-remove
icon-remove--cs
Change image
btn-primary
BeeButton_*
BeeSocialIcons_*
social-change-icon--cs
Apply effects
btn-default
BeeButton_*
BeeSocialIcons_*
social-edit-icon--cs
Choose image
btn
btn-file-picker
btn-secondary
btn-primary
BeeButton_*
btn-file-picker--cs
Change video
btn
btn-file-picker
btn-primary
BeeButton_*
btn-file-picker--cs
Select condition
btn
btn-primary
BeeButton_*
row-display-condition-select-button--cs
Add condition
btn-default
BeeButton_*
row-display-condition-add-button--cs
Edit condition
btn-default
BeeButton_*
row-display-condition-edit-button--cs
Open builder
btn
btn-primary
BeeButton_*
row-display-condition-builder-button--cs
Add new
column-manager--add
BeeButton_*
column-manager-add--cs
Delete
column-manager--delete
BeeButton_*
column-manager-delete--cs
Add favicon
btn
btn-primary
icon-manager__add-icon
icon-manager__add-icon--cs
BeeButton_*
favicon-add-icon--cs
Change favicon
btn-primary
BeeButton_*
favicon-change--cs
Delete
BeeButton_*
favicon-delete--cs
Radiogroups in the context of our web application refer to a UI component that groups together a set of radio buttons, allowing users to select one option from multiple choices. Each radiogroup is associated with specific classnames that define the appearance and behavior of the grouped buttons within the sidebar's layout. These classnames, such as radiogroup--cs
and radiogroup-button--cs
, are crucial for ensuring consistent and functional navigation in your application's user interface.
This page will cover widget classnames for content in the sidebar. This section will list the classnames for the following sidebar tabs:
This section lists the classnames for widgets and content within the row area of the sidebar.
This section lists the classnames for widgets and content within the Row & Content area of the sidebar.
This section lists the classnames for widgets and content within the Content area of the sidebar.
This section lists the classnames for widgets and content within the Settings area of the sidebar.
This page covers widget classnames for content in the sidebar, and lists the classnames for the following widgets:
The following table lists the content, deprecated classnames, and new classnames for font styles.
The following table lists the content, deprecated classnames, and new classnames for the icon collection.
The following table lists the content, deprecated classnames, and new classnames for menu items.
The following table lists the content, deprecated classnames, and new classnames for manage fields.
Sidebar Tab | Deprecated Classnames | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Content | Deprecated | New Classnames |
---|
Rows
PanelGroup_handle*
panel-group-dragging--cs
column-manager-delete--cs
column-manager-add--cs
panel-divider--cs
NA
NA
radiogroup--cs
radiogroup-button--cs
active--cs
NA
tgl-container
tgl-container--cs
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_background-toggle-content-area
multiToggle_option_background-toggle-row
btn-primary
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Carousel
Divider
Form
Heading
Html
Icons
Image
List
Menu
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-mobile__desktop
hide-on-mobile__mobile
btn-primary
hideOn-confirm-modal-icon--cs
radiogroup--cs
radiogroup-button--cs
active--cs
confirm-modal-icon--cs
Button
Divider
Form
Heading
Html
Icons
Image
List
Dynamic
Content
Paragraph
Social
Spacer
Text
Video
hide-on-amp__amp
hide-on-amp__html
btn
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form
Form Label Options
Form Button Options
Heading
Icons
Image
Menu
Paragraph
Social
Divider
item_1-2
widget__label
btn
btn-default
align-left
active
btn-align-left
btn-align-right
btn-align-center
btn-align-justify
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Form Label Options
Heading
Paragraph
List
Text
item_1-2
widget__label
active
btn-line-height--120
btn-line-height--150
btn-line-height--180
btn-line-height--200
radiogroup--cs
radiogroup-button--cs
active--cs
List
icon-toggle
icon-toggle--cs
icon-toggle-item
icon-toggle-item--cs
icon-toggle-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Form Label Options
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_descriptor_form_style_labels_label-position_0
multiToggle_option_descriptor_form_style_labels_label-position_1
btn-primary
static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Button
Heading
List
Paragraph
paragraph-item
paragraph-item--active
radiogroup--cs
radiogroup-button--cs
active--cs
Dynamic Content
item_1-2
widget__label
radio-button
radio-button__radio
radiogroup--cs
radiogroup-button--cs
active--cs
NA
tgl-container
tgl-container--cs
item_1-2
widget__label
btn-group
number-selector
number-selector--cs
tgl_bgd
active
btn
multiToggle_option_content_computedStyle_align_0
multiToggle_option_content_computedStyle_align_1
btn-primary static-label
tgl-label
radiogroup--cs
radiogroup-button--cs
active--cs
Form - Label |
|
|
Form - Button |
|
|
Social |
|
|
Icons |
|
|
Menu |
|
|
Form |
|
|
Carousel |
|
|
This page discusses and lists the various CSS classnames relevant to the application's sidebar widgets where textual input is required. These classnames facilitate the styling and functional integration of widgets such as URLs, images, alt texts, and more, providing a comprehensive guide for developers to enhance the user interface effectively.
This page will cover button classnames for the following sidebar areas:
This section lists the classnames for widgets within the Content tab.
The following table lists the widget, deprecated classnames, and new classnames for the Image content type.
Note: The sections below list additional deprecated and new classnames for the Image content type. The table above covers classnames specific to the Image widget, while the following tables include classnames that are shared between the Image content type and other content types.
The following table lists the widget, deprecated classnames, and new classnames for the Image, GIF, and Sticker content types.
The following table lists the widget, deprecated classnames, and new classnames for the following content types:
Image
Button
Icons
Menu
GIF
Sticker
The following table lists the widget, deprecated classnames, and new classnames for the following content types:
Image
Button
GIF
Sticker
Video
The following table lists the widget, deprecated classnames, and new classnames for the video content type.
The following table lists the widget, deprecated classnames, and new classnames for the social content type.
The following table lists the widget, deprecated classnames, and new classnames for the icon content types.
The following table lists the widget, deprecated classnames, and new classnames for the Form content types.
The following table lists the widget, deprecated classnames, and new classnames for all modules.
This section lists the classnames for widgets within the Rows tab.
This section lists the classnames for widgets within the Settings tab.
The various classnames and data-qa
attributes associated with entities within the application that feature sliders. These identifiers are crucial for styling and testing purposes, tailored to different areas like Add-On, Button, Form, and Image entities where sliders are a key component.
This page will cover button classnames for the following sidebar areas:
This section lists the classnames for sliders within the Content tab.
This section lists the classnames for sliders within the Settings tab.
On this page, you can reference the classnames added to the form and social content types in the content sidebar tab. The classnames listed on this page related to adding new fields for forms and adding social icons. These updates improve accessibility and the consistency of elements within these widgets.
Classnames that have been removed during this update are listed further down for your reference.
The following table included deprecated and new classnames for the Form content.
The following table included deprecated and new classnames for the Social Icon.
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Widget | Deprecated | New Classnames |
---|---|---|
Entity | Sidebar Widget | Deprecated | New Classnames | Data-QA | Notes |
---|---|---|---|---|---|
Entity | Deprecated | New Classnames | Data-QA | Notes |
---|---|---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
Content | Deprecated | New Classnames |
---|---|---|
URL
number-selector--cs
input-image-url
item_1-2
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Alt Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Dynamic Image > Dynamic URL
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox btn
input-text--cs input
text-boxed--cs
dynamic-image-url--cs
Web page > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Mail to
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Subject
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send email > Body
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Tel > Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS> Tel
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Send SMS > Message
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Attributes
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Image URL
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Alt text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Icon Text
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Item > Title
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Field label
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Block identifier
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background video
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Row background image
number-selector--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
Title
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-title--cs
Description
number-selector--cs
alternate-txt--cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-description--cs
Subject
number-selector--cs
alternate-text--cs
item_1-2
widget__textbox
widget__label
widget__label--textboxbtn
input-text--cs
input-text-boxed--cs
page-metadata-subject--cs
Preheader
number-selector--cs
alternate-txt-cs
item_1-2
widget__textbox
widget__label
widget__label--textbox
btn
input-text--cs
input-text-boxed--cs
page-metadata-preheader-cs
Add-On (Image)
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Button
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Form
Width
Button Width
BeeWidthSlider_*
rc-slider*
widget-BeeImageWidth
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Image
Width
BeeImageWidth_*
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Content Area Width
BeeWidthSlider_*
rc-slider*
slider--cs
slider-wrapper--cs
slider-btn
data-qa was moved from a div to the actual input element
Form
toggle-menu-button--cs
button-large--cs
widget__textbox
widget__searchbox
scrollable__panel--cs
button-small--cs
add-form-field--cs
dropdown-menu--cs
dropdown-menu-button--cs
dropdown-menu-search--cs
input-search--cs
dropdown-menu-scrollable--cs
dropdown-menu-item--cs
Social
icons-manager__pop--cs
icons-manager__popcontent
popver__tab
social-add-icon--cs
button-small--cs
add-social-icon--cs
dropdown-menu--cs
dropdown-menu-button--cs
dropdown-menu-search--cs
input-search--cs
dropdown-menu-scrollable--cs
dropdown-menu-item--cs