Media Card Pro

Create media layout boxes with different styles.

Basics Settings

Label
Define a name to easily identify this element inside the Theme-Builder.
Position
Position the component in the normal content flow but with an offset relative to itself.
Left
If position: relative; - the left property sets the left edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the left property sets the left edge of an element to a unit to the left of the left edge of its nearest positioned ancestor. (e.g. 20% or 50px ...)
Right
If position: relative; - the right property sets the right edge of an element to a unit to the left/right of its normal position.
If position: absolute; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)
Top
If position: relative; - the top property makes the element's top edge to move above/below its normal position.
If position: absolute; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. (e.g. -20% or 50px ...)
Bottom
If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
If position: absolute; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. (e.g. 10% or 50px ...)
z-index
The z-index property specifies the stack order of an element. Z-index only works on positioned elements (position: absolute, position: relative).
Show
Select one of the following options to show the element for screens larger than the specified width.
Hidden
Select one of the following options to hide the element from screens larger than a specified width.
Class
Define one or more class names for the element. Separate multiple classes with spaces.
ID
ID Selector for the element.

Title Settings

Title Show
When set to 'Yes', this option will enable component title in front-end.
Title
Enter text which will be used as Component title.
Title HTML Tag
Choose a HTML-Tag for the title.
Font Size
Set Title font size for this selector.
Font Weight
Set Title font weight for this selector.
Title Style
Choose a title style modifier.
Title Color
Choose a Title color.

Style Settings

Addon Padding
Choose a padding for the component.
Content
Enter text used as component content. (HTML is allowed)
Button Text
Enter text used as button text.
URL
Set a Button url.
Select Menu Link.
Leave URL blank to select a available 'Menu Link'.
Button target
Choose how to open the link.
Button Icon
Select an Font Awesome icon from the list.
Button Size
Select button size.
Button Type
Set button type.
Card Style
Choose a Card Style.
Card Hover modifier?
Yes or No.
Card Size
Choose a Card Size.
Card Badge?
Use Card Badge
Item Image
Use Card Image.
Set Image 'alt' attribute
Set HTML Image 'alt' attribute.
Image Position
Choose image position.

SVG Style

TOP SVG Divider?
Choose a top SVG Divider. Note: Top Divider works only if your card have an Image on bottom.
Divider Drop Shadow Top?
Yes or No.
Drop Shadow Color
Set Shadow color.
Blur Amount
Set blur amount.
Blur Y Offset
Set Drop Shadow blur vertical displacement.
Mirrored?
Yes or No. To mirror the top divider choose 'Yes'. Note: You cannot mirror all svg shapes.
Bottom SVG Divider?
Choose a bottom SVG Divider. Note: Bottom Divider works only if your card have an Image on top.
Divider Drop Shadow Bottom?
Yes or No.
Drop Shadow Color
Set Shadow color.
Blur Amount
Set blur amount.
Blur Y Offset
Set Drop Shadow blur vertical displacement.
Mirrored?
Yes or No. To mirror the bottom divider choose 'Yes'. Note: You cannot mirror all svg shapes.

Animation Settings

Scrollspy Animation
The Scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears in the viewport for the first time, you can trigger a smooth animation to fade in the element.