Tutorials stack icon

Image Card

The perfect RapidWeaver stack for creating simple, stylish, linkable cards … and best of all, its FREE

Table of Contents

  • How to use
  • General
  • Card
  • Caption
  • More Button
  • Hover FX


Introduction

Here you can learn how to use the Image Card from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Once you drag the Image Card stack onto your page, you will see that it already has some great default styles setup for you. The only thing you really need to do is add an image!


General

Fill Mode (Select Dropdown)

The fill mode determines the maximum width of the Image Card. You can choose to set it to a percentage value or a pixel value.

Alignment (Select Dropdown)

The alignment will determine whether the card is positioned to the left, right, or center of it's container.

Card Image (Image Input)

This is where you can set the backround image for the card.

Card Link (Link Input)

This is where you can set a link to go to when the card is clicked on.


Card

Heights (3 Inputs)

You will see 3 inputs for setting the card height at different sizes - Desktop, Tablet, and Mobile.

Margin (2 Inputs)

There are 2 inputs for the margin, one for the vertical margin and one for the horizontal margin around the card.

Padding (2 Inputs)

There are 2 inputs for the padding, one for the vertical padding and one for the horizontal padding inside of the card.

Radius (Inputs)

This input allows you to set the roundness of the corners of the image card.

Text Color (Color Input)

This color will determine the color of the text, and the more button that appear in the card.

Background Color (Color Input)

This color will determine the background color of the card. NOTE: If you add an image of the card, this color will not be seen. It is mainly for images that have transparent backgrounds.

Overlay Type (Select Dropdown)

Image Cards can have an overlay that will display over the top of the image. It can be either a solid color or a two-toned gradient.

After selecting one of the options you will see the appropriate color-input appear for setting the color or gradient.

Overlay Opacity (Slider)

This will allow you to choose how transparent the overlay color/gradient will be on top of the card.

Drop Shadow (Checkbox)

If you check this option, you will see values appear for setting a drop-shadow behind the image card.


Caption

Caption text can be changed simply by double-clicking on it in RapidWeaver.

Hide Caption (Checkbox)

If you check this option, the caption will be hidden from the card.

Title Font (Select Dropdown)

Here you can choose a font for the image caption.

Font Sizes and Line-Heights

In the caption section, you will see 2 inputs (Font-Size & Line-height) for Desktop, Tablet, and Mobile devices. This allows you to choose the appropate text-size and spacing for all screen-sizes.

Text Shadow (Checkbox)

If you check this option, you will see values appear for setting a text-shadow on the Caption text.


More Button

The more button is the small button with an arrow in the corner of the card.

Button Size (Input)

The button is square naturally. Changing the size will increase both the height and width of the button.

Icon Size (Input)

Changing the icon size will change the font-size of the arrow inside of the More Button.

Border Thickness (Input)

This input simply determines the thickness of the border around the More Button.

Hover Icon Color (Color Input)

In some cases you may want to add a custom color for the icon when the card is hovered. You can do so here.


Hover FX

Overlay Opacity (Slider)

The opacity of the Overlay can be changed on hover. Use this slider to do so.

Shift of Hover (Checkbox)

Image Cards can shift up or down on hover for a cool effect. If you check this option, an input will appear where you can set a value for the shift amount. It can be either ( + ) positive, or ( - ) negative.

Image Card Changelog

Version 1.0.7

  • Added an option for opening links in a new tab or on the same page

Version 1.0.6

  • Added ability to set custom icons
  • Added ability to remove link from card
  • New icon!

Version 1.0.5

  • Fixed bug causing fonts not to load properly

Version 1.0.4

  • Fixed bug where hover overlay effect was not working

Version 1.0.3

  • Fixed bug causing caption colors not to work with Foundation
  • Created more efficient method for loading in fonts
  • Fixed bug causing fonts & custom fonts not to work with Foundation
  • Added an option for pulling in images via URL for warehoused images
  • Fixed bug causing Icon font not to load properly with HTTPS

Version 1.0.0

  • Ability to set specific heights at Desktop, Tablet, and Mobile devices.
  • Ability to link cards to different pages
  • Custom padding, margin, and radius options
  • Custom card overlay (gradients or colors)
  • Ability to set overlay opacity
  • Custom Caption with different sizing and line-height options for Desktop, Tablet, and Mobile devices
  • More button with customizable options
  • Ability to add hover FX such as overlay opacity and card shift