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.