
Job Board
Table of Contents
- How to use
- General
- Search Bar
- Favorites Toggle
- Items > General
- Items > Icons
- Items > Apply Button
- Job Entry Stack
Introduction
Here you can learn how to use the Job Board stack 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
Job Board is extremely easy to set up! In fact, all you have to do is drag the stack onto the page, add Job Entrys using the ( + ) button, and then input your information!
There are tons of color customization options as well!
General
Here you will find a couple of general properties that pertain to the entire stack such as the Font, and the Maximum Width
Max Width
The max width simply determines the maximum width that the stack can stretch. It will automatically respond to fit mobile devices.
Font
With this select dropdown, you can choose from a list of hand-picked web fonts, all of which work great with Job Board.
Text Content
Job Board allows you to customize all of the text that is used throughout the stack. This is great if your website uses a different language, or if you prefer different terminology!
You can edit the text for:
- Favorites Section
- Apply Button
- Days Remaining
- Contracts
- Full-Time
- Part-Time
- Internship
- Temporary
- Wage Types
- Annually
- Monthly
- Daily
- Hourly
- Project
Search Bar
This is where you can edit the search bar, most of the configuration options are colors, but there are a few others as well.
Size
The height of the Search Bar
Font Size
The size of the text when typing into the search bar
Radius
The corner roundness of the search bar (also applies automatically to favorites toggle)
Colors
The editable colors for the Search Bar include:
- Background
- Text
- Icon (Search Icon)
- Highlight Background
- Highlight Text
Favorites Toggle
The favorites toggle refers the entire Favorites bar which can be found directly below the search bar. This bar acts as a button that will toggle all of the users favorited job entries.
Max-Width
This can be used to make the Favorites toggle wider or smaller, depending on your preference.
Alignment
When the toggle is not spanning the full-width, you can set its alignment to:
- left
- center
- right
Colors
The editable colors for the favorites toggle include:
- Bar Background (Initial, and Selected states)
Bar Text (Initial, and Selected states)
Count Background (Initial, and Selected states)
Count Text (Initial, and Selected states)
Toggle Background (Initial, and Selected states)
Toggle Circle (Initial, and Selected states)
Favorited Heart (Background, and Text)
Items > General
Here you will find a few basic options that pertain to all items, as well as some of the major item colors
Spacing
The vertical spacing between each entry
Radius
The corner roundness of each entry
Colors
The editable colors for the general items section include:
- Background
Text
Location
Time Remaining
Tags (Background & Text)
Button Background (Initial & Hover States)
Button Text (Initial & Hover States)
NOTE: The Buttons refer to the favorite button, and the view more dropdown arrow on the right hand side of each job entry
Items > Icons
Here you can edit the icons on the left side of each job entry
Icon Sizes (Circle & Icon)
The circle controls the size of the outer part of the icon, while the icon controls the actual icon inside of the circle
Icon Radius
This determines the roundness of the icon circle
Colors
The editable colors for the entry icons include:
- Background (circle color)
- Icon (icon color)
Items > Apply Button
Here you can configure the styles for the apply button, as well as set up the action for when the button is clicked.
Padding (Vertical & Horizontal)
Controls the padding around the edges of the button
Font Size (Vertical & Horizontal)
Controls the size of the text inside of the button
Colors
The editable colors for the apply button include:
- Background (Initial & Hover States)
- Text (Initial & Hover States)
Apply Button Action (Select Dropdown)
There are two options for apply button action:
- 1. Open an email dialogue for the user to send a message
- 2. Direct the user to a contact page where they can reach you
If you select one of these options, you will then see inputs for including email information, or the url to your contact page.
Job Entry Stack
The Job Entry Stack refers to each individual item/entry added to the list. If you click on a job entry in the editor, you will see all of the options for customizing the information in the inspector panel.
The options include:
Title
The title of the position
Location
The location where the position will be carried out
Close Date
The date that the job opening will end
Short Description
A short description for the user to get a basic idea of the job.
NOTE: There is a special area for including more detailed information, therefore this description should be kept short~
Contract Type (Dropdown)
There are 4 contract types to choose from (more coming very soon)
- Full-Time
- Part-Time
- Internship
- Temporary
Wage Type (Dropdown)
There are 5 wage types to choose from (more coming very soon)
- Yearly
- Monthly
- Daily
- Hourly
- Project
Wage
Here you can input the actual payment for the job. Note, you should include your own currency symbol here.
Icons
Lastly, you can set the icon for each job entry here as well!
Job Board Changelog
Version 1.0.0
- Live search filtering through job entries
- Live search result highlighting
- Favoriting system for users to store job entries
- Filter by favorites
- Custom Apply button actions
- Customizable text content for multiple languages
- Tons of color customization options