Personal Cards contain content and actions about a single subject.

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.

Animation Delay

Total seconds to complete the number increment rolling.

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.

Subtitle Show

Yes or No.

Style Settings

Addon Padding

Choose a padding for the component.

Content

Enter text used as component content. (HTML is allowed)

Facebook

Link to Facebook page.

Twitter

Link to Twitter page.

Instagram

Link to Instagram page.

LinkedIn

Link to LinkedIn page.

YouTube

Link to YouTube page.

Tumblr

Link to Tumblr page.

Vimeo

Link to Vimeo page.

Flickr

Link to your Flickr gallery.

Pinterest

Link to your Pinterest gallery.

Social Icons Target

Choose how to open social links.

Large Social Icons?

Yes or No.

Social Icons Positions

Choose social icons position.

Grid: Match height

Choose 'Yes' to match the height of the direct child of each cell.

Button Text

Enter text used as button text.

URL

Leave blank to select a 'Menu Link'.

Select Menu Link.

Choose an available Link.

Button target

Choose how to open the link.

Button Icon

Choose button Font Awesome icon.

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?

Enter text used as card badge.

Item Image

Use a Card Image.

Set Image 'alt' attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

Image Position

Choose a image position.

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.

Use Box Parallax Animation?

Yes or No. (Learn more)