Card Header & footer

Create a responsive card header and footer with ton of features — Animation, Parallax, Boxes Style

  • Kevin & Amanda

    Kevin & Amanda

    Founders Nest @ Main hall
    Business leaders know that growing a company requires you to put yourself out there and stay ahead of trends. One good way to accomplish both is by attending industry events throughout the year.
  • Stuard Ferrel

    Stuard Ferrel

    Designer @ Main hall
    Business leaders know that growing a company requires you to put yourself out there and stay ahead of trends. One good way to accomplish both is by attending industry events throughout the year.
  • Melissa Tatcher

    Melissa Tatcher

    Designer @ Main hall
    Business leaders know that growing a company requires you to put yourself out there and stay ahead of trends. One good way to accomplish both is by attending industry events throughout the year.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.
  • Mary Atkinson

    Mary Atkinson

    CEO at WarpTheme
    Being a customer of WarpTheme is one of the best decision I have taken in 2017. The product is versatile and their support is awesome. Highly recommended.

Content Fields

Here is a list of common content fields for Card Header add-on.

Setting Description
Title A text field used for name of the person
HTML Element Choose on of the elements to fit your semantic structure.
Style Heading styles differ in font-size but may also come with a predefined color, size and font
Meta A text field used for meta text like the author or publication date.
Image An image field with an image picker.
Content A text field for the main text blocks.
Use Link Enable this option to add button text/button style and button size
Style Select one of the boxed card styles or a blank card
Size Define the card's size by selecting the padding between the card and its content
Hover To create a hover effect on the card.

Image Settings

Here is a list of common setting fields for Image add-on.

Setting Description
Image width Setting just one value preserves the original proportions. The image will be resized and cropped automatically, and where possible, high resolution images will be auto-generated.
Image Border Select the image's border style.

Item Settings

Here is a list of common setting fields for Items

Setting Description
Parallax To move single columns of a grid at different speeds while scrolling. Turn off global animation if you use parallax feature.
Show dividers Select this option to separate grid cells with lines.
Match height You can also target and match specific elements inside the container.

Column Settings

Columns control the grid layout of your content.

Setting Description
Phone Portrait/Phone Landscape/Tablet Landscape/Desktop/Large Screens Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Information

Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. WarpTheme.com is not affiliated with or endorsed by Open Source Matters or the Joomla! project