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:
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.
Links
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
