CSS page classes
This is a reference list of the standardized classes that we recommend you use whenever possible. You can always view the source or inspect specific elements to determine all available class names, but the classes listed on this page will not change as CONTENTdm is updated in the future.
You can always view the source or inspect specific elements to determine all available class names, but what follows is a summary of the standardized classes that we recommend you use whenever possible.
Note: Please see JavaScript and CSS examples for additional customization examples.
Website-level classes
Website-level classes exist in every page.
| Page Class | Description |
|---|---|
.cdm-header |
Website header. |
.cdm-footer |
Website footer. |
.cdm-main-content |
The main content of the page. |
Component-level classes
Component-level classes correspond to portions of pages.
| Page Class | Description |
|---|---|
.cdm-content-header |
The upper section of the main content of a page (for the home page: above the collection card UI; for the search page: the sort and results count UI). |
.cdm-collection-card |
The collection cards on the home page. |
.cdm-item-card |
The item cards on the search results page. |
Global page classes
Global page classes exist only in the page specified.
| Page Class | Description |
|---|---|
.cdm-home-page |
General class for the home page. |
.cdm-about-page |
General class for the about page. |
.cdm-login-page |
General class for the login page. |
.cdm-search-page |
General class for the search page. |
.cdm-notfound-page |
General class for the not found page. |
.cdm-advanced-search-page |
General class for advanced search. |
.cdm-custom-page |
Class for the custom pages. |
Collection-level page classes
| Page Class | Description |
|---|---|
.cdm-collection-page |
General class for all collection- level pages (collection landing page, collection search, item pages). |
.cdm-collection-landing-page |
General class for the collection landing page. |
.cdm-collection-search-page |
General class for the collection search page. |
.cdm-item-page |
General class for the item page (item pages always have collection-level context). |
The cdm-collection-pageclass exists in all collection-level pages. This means any page below the URL /digital/collection/ will contain that general class. Additionally, within the collection page context, there will always be a collection-specific class that includes the collection alias of the collection in question. By combining the generic collection-level classes with the collection-specific collection-level classes, you can target your CSS styling very precisely.