Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review
Information
Print

Card styles

Information
Latest News Enhanced

Each card style has its own properties and you may want to experiment which style best fits your design needs.

Each card style has its own properties and you may want to experiment which style best fits your design needs.

Original

For head types: image calendar icon video

The original style
The Original style

This is a multi-purpose style that will fit most situations and can be used with any 'head' type. The 'head' can be positioned at the top, left or right of the body content. The body can wrap around the head.

Sample original style
An example of a card using the Original style

When the head type is 'image'

This style works best with small image sizes. When using larger images and positioning the image on the right or on the left of the body content, some CSS tweaks may be necessary to improve the responsiveness of the layout (see the article Tip: fixing an un-responsive layout in Latest News Enhanced for Joomla)

Original style with image head type
The Original style with the image head type

When the head type is 'calendar'

Original style with calendar head type
The Original style with the calendar head type

When the head type is 'icon'

Original style with icon head type
The Original style with the icon head type

When the head type is 'video'

Like for images, when using large videos, you may need to tweak the CSS to improve the layout (when using positions left and right).

Original style with video head type
The Original style with the video head type

Original (modern)

For head types: image calendar icon video

The original (modern) style
The Original (modern) style

This is a multi-purpose style that will fit most situations and can be used with any 'head' type. Elements composing the card are laid out with Flexbox and there is more white space between them. The head can be positioned at the top, bottom, left or right of the body content. The body CANNOT wrap around the head (in left and right positions). However, when space is lacking, the whole body content will move below the head. Head types are treated similarly to the original theme.

Sample original (modern) style
An example of a card using the Original (Modern) style

Full Width

For head types: image calendar icon video

The full width style
The Full width style

This style can be used with any 'head' type. The particularity of this style is that the body of the card will not grow larger than the 'head' (when the head type is an image or a video). The 'head' is always above or below the content of the body (use head position 'top' or 'bottom').

Sample full width style
An example of a card using the Full Width style

When the head type is 'image'

The body content is as wide as the image.

Full width style with image head type
The Full Width style with the image head type

When the head type is 'calendar'

The body content is not restricted to the size of the head. By default, the calendar is centered at the top or bottom of the card.

Full width style with calendar head type
The Full Width style with the calendar head type

When the head type is 'icon'

The body content is not restricted to the size of the head. By default, the icon is centered at the top or bottom of the card.

Full width style with icon head type
The Full Width style with the icon head type

When the head type is 'video'

The body content is as wide as the video.

Full width style with video head type
The Full Width style with the video head type

Overlap

For head type: image

The overlap style
The Overlap style

This style can be used with the image 'head' type ONLY. The text content is placed over the image. The 'head' width dictates the size of the card. However, it can resize down. The text can be placed at all cardinal points (side left, side right, top or bottom - use the head position parameter for that purpose). The text has a semi-transparent background to improve readability. When lacking space, the text will be scrollable. To avoid that, keep the content minimal and use a minimum item width that 'makes sense'. 

A good starting point when designing with this style is to have item max-width equal to head width.

Sample overlap style
An example of a card using the Overlap style

Flexi Cover

For head type: image

The flexi cover style
The Flexi Cover style

This style can be used with the image 'head' type ONLY. The text content is placed over the image. The content dictates the size of the card. The image grows if the image dimensions are smaller than the card size (using the CSS property object-fit: cover).
The text can be pinned to the top or the bottom of the card (use the head position parameter for that purpose). The whole image is covered with a semi-transparent gradient to improve text readability.

Sample flexi  cover style
An example of a card using the Flexi Cover style

Related tutorials and topics