Company Management styles

Customize the Company Management drop-in using CSS classes and design tokens. This page covers the Company Management-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 1.0.0-beta16

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Company Management drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.company-registration-success {
2
  max-width: 600px;
3
  margin: 0 auto;
4
  padding: var(--spacing-big, 24px);
5
  max-width: 900px;
6
  margin: 0 auto;
7
  padding: var(--spacing-big, 24px);
8
}

Container classes

The Company Management drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* CompanyCreditDisplay */
2
.company-management-company-credit-display {}
3
.company-management-company-credit-grid {}
4
.company-management-company-credit-negative {}
5

6
/* CompanyCreditHistoryDisplay */
7
.company-management-company-credit-history-display {}
8
.company-management-company-credit-history-table {}
9
.company-management-price-normal {}
10
.pageSizeSelector {}
11
.paginationButton {}
12
.paginationButtons {}
13
.paginationContainer {}
14
.paginationEllipsis {}
15
.sr-only {}
16

17
/* CompanyLoaders */
18
.company-company-loaders--card-loader {}
19
.company-company-loaders--picker-loader {}
20
.company-credit-skeleton-loader {}
21

22
/* CompanyProfileCard */
23
.account-company-profile-card {}
24
.account-company-profile-card-short {}
25
.account-company-profile-card__actions {}
26
.account-company-profile-card__content {}
27
.account-company-profile-card__no-data {}
28
.account-company-profile-card__wrapper {}
29
.company-contact {}
30
.company-contacts {}
31
.company-legal-address {}
32
.company-payment-methods {}
33
.company-profile__title {}
34
.dropin-card__content {}
35

36
/* CompanyRegistrationForm */
37
.company-form-section {}
38
.company-form-section__title {}
39
.company-form-wrapper {}
40
.company-form-wrapper__buttons {}
41
.company-form-wrapper__errors {}
42
.company-form-wrapper__submit {}
43
.error-message {}
44

45
/* Form */
46
.company-form {}
47
.company-form-loader {}
48
.company-registration-form__inputs {}
49
.company-registration-form__section {}
50

51
/* CompanyRegistrationSuccess */
52
.company-registration-success {}
53
.company-registration-success__details {}
54
.company-registration-success__details-title {}
55
.company-registration-success__grid {}
56
.company-registration-success__header {}
57
.company-registration-success__item {}
58
.company-registration-success__label {}
59
.company-registration-success__pending {}
60
.company-registration-success__section-header {}
61
.company-registration-success__subtitle {}
62
.company-registration-success__title {}
63
.company-registration-success__value {}
64

65
/* CompanyStructureCard */
66
.acm-structure-description-button {}
67
.acm-structure-expander {}
68
.acm-structure-expander--placeholder {}
69
.acm-structure-expander-button {}
70
.acm-structure-handle {}
71
.acm-structure-icon {}
72
.acm-structure-label {}
73
.acm-structure-modal {}
74
.acm-structure-modal-actions {}
75
.acm-structure-modal-content {}
76
.acm-structure-modal-title {}
77
.acm-structure-modal__actions {}
78
.acm-structure-modal__backdrop {}
79
.acm-structure-modal__body {}
80
.acm-structure-modal__title {}
81
.acm-structure-panel {}
82
.acm-structure-panel__title {}
83
.acm-structure-row {}
84
.acm-structure-toolbar {}
85
.acm-structure-toolbar-card {}
86
.acm-structure-toolbar-card--spaced {}
87
.acm-structure-tree-card {}
88
.acm-structure-tree-content {}
89
.acm-structure-tree-overlay {}
90
.acm-structure-working {}
91
.is-team {}
92
.is-user {}
93
.is-working {}
94
.req {}
95
.secondary {}
96

97
/* CompanyStructureEmpty */
98
.company-management-company-structure-card {}
99
.company-management-company-structure-card__alert {}
100
.company-management-company-structure-card__cta {}
101
.dropin-button {}
102

103
/* CompanyTeamForm */
104
.company-team-form__card {}
105
.company-team-form__content {}
106
.company-team-form__overlay {}
107
.dropin-field {}
108
.dropin-field__label {}
109
.is-working {}
110

111
/* CompanyUserForm */
112
.company-user-form__card {}
113
.company-user-form__content {}
114
.company-user-form__overlay {}
115
.dropin-field {}
116
.dropin-field__label {}
117
.is-working {}
118

119
/* CompanyUsersManagementModal */
120
.company-management-company-users-management-modal {}
121
.company-management-company-users-management-modal-overlay {}
122
.company-management-company-users-management-modal__actions {}
123
.company-management-company-users-management-modal__alert {}
124
.company-management-company-users-management-modal__button-cancel {}
125
.company-management-company-users-management-modal__button-delete {}
126
.company-management-company-users-management-modal__button-primary {}
127
.company-management-company-users-management-modal__close {}
128
.company-management-company-users-management-modal__content {}
129
.company-management-company-users-management-modal__header {}
130
.company-management-company-users-management-modal__text {}
131
.company-management-company-users-management-modal__title {}
132

133
/* CustomerCompanyInfoCard */
134
.customer-company-info-card {}
135
.customer-company-info-card__content {}
136
.dropin-card__content {}
137

138
/* DeleteRoleModal */
139
.delete-role-modal {}
140
.delete-role-modal__actions {}
141
.delete-role-modal__cancel-btn {}
142
.delete-role-modal__confirm-btn {}
143
.delete-role-modal__content {}
144
.delete-role-modal__ok-btn {}
145

146
/* EditCompanyProfile */
147
.account-edit-company-profile {}
148
.account-edit-company-profile-form {}
149
.account-edit-company-profile-form__field {}
150
.account-edit-company-profile-form__section {}
151
.account-edit-company-profile-form__section-title {}
152
.account-edit-company-profile__actions {}
153
.account-edit-company-profile__loading-overlay {}
154
.account-edit-company-profile__loading-text {}
155
.account-edit-company-profile__notification {}
156
.account-edit-company-profile__title {}
157
.dropin-card__content {}
158

159
/* EditRoleAndPermission */
160
.acm-tree__group {}
161
.acm-tree__item {}
162
.dropin-field__label {}
163
.edit-role-and-permission {}
164
.edit-role-and-permission-form {}
165
.edit-role-and-permission__actions {}
166
.edit-role-and-permission__loading-overlay {}
167
.edit-role-and-permission__loading-text {}
168
.edit-role-and-permission__notification {}
169
.edit-role-and-permission__permissions-description {}
170
.edit-role-and-permission__section {}
171
.edit-role-and-permission__section-title {}
172
.edit-role-and-permission__title {}
173
.edit-role-and-permission__tree-container {}
174
.edit-role-and-permission__tree-controls {}
175
.edit-role-and-permission__tree-expander {}
176
.edit-role-and-permission__tree-label {}
177
.edit-role-and-permission__tree-loading {}
178
.edit-role-and-permission__tree-node {}
179
.edit-role-and-permission__tree-spacer {}
180
.edit-role-and-permission__validation-spinner {}
181

182
/* RoleAndPermissionTable */
183
.active {}
184
.company-management-role-and-permission-table {}
185
.dropin-picker__button {}
186
.dropin-picker__option {}
187
.dropin-table__body__cell {}
188
.dropin-table__body__row {}
189
.dropin-table__header__cell {}
190
.dropin-table__header__row {}
191
.dropin-table__table {}
192
.item-count {}
193
.page-actions {}
194
.page-content {}
195
.page-ellipsis {}
196
.page-footer {}
197
.page-header {}
198
.page-info {}
199
.page-nav-button {}
200
.page-navigation {}
201
.page-num-button {}
202
.page-size-picker {}
203
.pagination-controls {}
204
.pagination-label {}
205
.pagination-section {}
206
.role-action-button {}
207
.role-action-wrapper {}
208
.role-actions-container {}
209
.roles-actions {}
210
.roles-and-permissions-card {}
211
.roles-and-permissions-page {}
212
.roles-table-container {}
213
.separator {}
214
.table-footer {}
215
.table-footer-center {}
216
.table-footer-left {}
217
.table-footer-right {}
218

219
/* Tree */
220
.acm-structure-label {}
221
.acm-structure-row {}
222
.acm-tree {}
223
.acm-tree-root {}
224
.acm-tree__group {}
225
.acm-tree__item {}
226
.acm-tree__label {}
227
.acm-tree__row {}
228

229
/* CompanyStructure */
230
.account-company-structure {}
231
.company-structure__title {}
232

233
/* CompanyUsers */
234
.addUserButtonContainer {}
235
.companyUsersTable {}
236
.edit-user-button {}
237
.filterButtons {}
238
.loadingContainer {}
239
.manage-user-button {}
240
.pageSizeSelector {}
241
.paginationButtons {}
242
.paginationContainer {}
243
.sr-only {}
244
.user-actions {}

For the source CSS files, see the storefront-company-management repository.