Create your beautiful business hours for contact/service pages

Business Hours

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Business Hours

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Business Hours

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Title Padding Default

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Title Padding Small

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Title Padding Large

Monday09:00 - 19:00
Tuesday09:00 - 19:00
Wednesday09:00 - 19:00
Thursday09:00 - 19:00
Friday09:00 - 19:00
Saturday09:00 - 19:00
SundayClosed

Content Fields

Here is a list of common content fields for Business Hours add-on.

Setting Description
Enter Day A text field used for day of the business hours
Enter Time A text field used for time of the business hours
Style This Day Checkbox option to styling the highlight day with different color
Title Enter your desired text to use as the addon title. Leave blank if no title is needed.

Title Settings

Title Style settings, The Title Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
HTML Element Choose the title html element from the list to fit your semantic structure.
Style Heading styles differ in font-size but may also come with a predefined color, size and font
Title Color Color field for customizing title color
Title Background Color field for customizing title background color
Title Padding Add title padding
Title Alignment Choose title alignment (position)
Title transform The following options will transform title into uppercased, capitalized or lowercased characters.
Icons Select an SVG icon from the list. See live preview here https://getuikit.com/docs/icon

Style Settings

Style settings, The Style Settings contains all the specific settings for an add-on. Here is a short overview.

Setting Description
Style Select on of the boxed card styles or a blank card.
Size You can apply different size modifiers to cards that will decrease or increase their padding.
Hover Select this option to add box shadow on hover.
Divider Create dividers to separate content.
Striped Items Add zebra-striping to a list
Hover Items Display a hover state on table rows.

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.