Card Background Reference
Collaborate with us
Edit this page on GitHub
Layout and classes
CSS selectors
| Element | CSS Class | Description |
|---|---|---|
| .card-background-content | .bottom-center | Vertically aligns the content to Bottom and Horizontally align it to Center. |
| .card-background-content | .bottom-left | Vertically aligns the content to Bottom and Horizontally align it to Left. |
| .card-background-content | .bottom-right | Vertically aligns the content to Bottom and Horizontally align it to Right. |
| .card-background-content | .center | Vertically aligns the content to Center and Horizontally align it to Center. |
| .card-background-content | .center-left | Vertically aligns the content to Center and Horizontally align it to Left. |
| .card-background-content | .center-right | Vertically aligns the content to Center and Horizontally align it to Right. |
| .card-background-content | .top-center | Vertically aligns the content to Top and Horizontally align it to Center. |
| .card-background-content | .top-left | Vertically aligns the content to Top and Horizontally align it to Left. |
| .card-background-content | .top-right | Vertically aligns the content to Top and Horizontally align it to Right. |
Advanced use case
Add a new style to the Counter pattern
-
Drag the Counter pattern into the preview.
-
Set the Input Parameters to the following values:
- Color:
Entities.Color.Neutral10 - Position:
Entities.PositionExtended.BottomCenter - Height:
400 - ExtendedClass:
shadow-xl
- Color:
-
Add a text widget into the Content placeholder and set the Style Classes property to
heading4 text-neutral-0.
-
Drag an image to the BackgroundImage placeholder.
-
Publish and test.
Notes
The object-fit property is not supported in Internet Explorer.