Media Card Pro

Create media layout boxes with different styles.

Basics Settings

Date Publishing Settings: Set the Start Publishing and Finish Publishing dates. This will cause the ui/Theme-Builder component to only be published for the specified time period. If you use both the Start Publishing and the Finish Publishing, the ui/Theme-Builder component will show up only between the beginning date and the ending date.
Start Publishing: If you only set the Start Publishing and not the Finish Publishing, Joomla! will begin displaying the ui/Theme-Builder component on the beginning publishing date given but it will never stop showing the component.
Finish Publishing: If you only set the Finish Publishing and not the Start Publishing, Joomla! will show the ui/Theme-Builder component as soon as you have turned it on and will stop showing the component once the ending publishing date has been reached.
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 Position: Choose the position of a 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.
Image Height: Set image height.

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.

Stephan W.Components