Tutorials

Events

General

Toggles

  • Shop Top Date
  • Shop Bottom Date
  • Shop Description
  • Shop Info 1 (Location)
  • Shop Info 2 (Time)

Maximum Width

This sets the maximum width that the event cards can expand. They will automatically shrink to become smaller when the device size is changed.

Wrapping Point

At a specific points, the event cards will wrap, meaning that the dates will stretch the full width, and the title/description/info content will wrap below the date. This is the look for mobile devices.

You can choose the specific breakpoint width at which this point will happen. It is recommended that you set it to somewhere around 500px.

Responsive Breakpoints (Tablet & Mobile)

Throughout the stack you will find that there are specific sizing options for Desktop, Tablet and Mobile. These breakpoints will determine the point at which the Tablet, and Mobile sizing options are applied.

Events > General

You will find general styling and sizing options for events, including Radius, Padding, Margin, Title, Description, and Info (Time/Local/etc.) settings.

Radius

This determines the corner roundness of each event card.

Margin (Vertical & horizontal)

The margin is the spacing around each event card. If you want to add more space between each event card, then increase the vertical margin.

Padding

The padding refers to the amount of padding inside the content area of the events, e.g. the title, description, info, toggle, etc.

Content Spacing

The content spacing refers to the amount of space between the title, description, and info. Increase this option to add more space between them.

Title (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the title for Desktop, Tablet, and Mobile devices.

Title Weight

Here you can choose whether or not the font-weight of the title should be set to bold or normal. On some fonts bold looks too extreme, therefore we’ve included this option.

Description Size (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the description for Desktop, Tablet, and Mobile devices.

Info 1 & 2 Sizes (Desktop, Tablet, & Mobile Sizes)

Here you can edit the font-size of the info sections (time, location, or whatever icon you choose). The size can be set for Desktop, Tablet, and Mobile devices.

Font Family

Here you can select from a list of fonts for the event Title, Description, and Info.

You can also select a custom font by choosing “Custom” from the list, and then specifying the font URL along with the font name.

Event > Dates

**NOTE: There are two dates included with the Events stack, a TOP date and a BOTTOM date. This is useful for creating different combinations of dates.

Date and time formatting codes can be found here:

Date & Time Format Codes

Top Format

The top format option referrs to the format of the date that will display. By default it is set to: “DD” which refers to the 2-digit day of the month (01, 10, 24, etc.)

It can also be set to a time by doing something like “h:mm” meaning 8:00, or 10:00.

Bottom Format

The bottom format is the same as the top format, refer to the top format about for more information.

Min-width

Because certain date-names or times may be longer in width than others, we’ve provided a minimum width for the date section. This helps to keep all of the date sections the same size! It keeps them neat and sharp. If you find that one date/time is too long compared to the others, then increase this option and they will all be at-least this width.

Padding

The padding refers to the amount of padding within the date section.

Date Top & Bottom Sizes (Desktop, Tablet, & Mobile)

Here you can find the font-sizing options for both Top and Bottom dates, which can be edited for Desktop, Tablet, and Mobile

Font Family

Here you can set the font family for the Dates

Events > Details

The details sections refers to the area where you add in your own stacks or content. There are just a few basic options for the details section of the events.

Toggle Text

After the wrapping point for mobile devices, some useful text appears next to the toggle which reads “View Details”. You can customize this text here.

Padding (Vertical & Horizontal)

Here you can specify the vertical and horizontal padding of the details section.

Text Size

This refers to the general text size of the details section. Though, some stacks may override this text size.

Font Family

This specifies the font of the content inside of the details section.

Events > Colors

With Events, all of the color options are placed together, making it quick and easy to style everything all at once. The color options will be explained breifly below:

Title

The color the main title of the event

Description

The color the short description just below the main title

Info 1 & 2

The color of the info text & icons(time/location/etc.) below the description.

Date Top

The color of the top date in the date section

Date Bottom

The color of the bottom date in the date section

Header Tags

This refers to any h1, h2, h3, h4, h5, h6 tags that may appear in the details section.

Text

The general color of all text within the details section.

The genera color of all links within the details section.

Shadow Color

Here you can specify a color and various properties for the shadow behind each event card. Set all values to “0” if you want to have no shadow.

Background

This refers to the general background of all event cards. You can choose between:

  • None
  • Color
  • Gradient

Date Background

This refers to the background of all Date sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient

Details Background

This refers to the background of all detail sections in the event cards. You can choose between:

  • None
  • Color
  • Gradient

Updates & Changelog

Need to update your product? Use this form to download the latest version.