225-248-0035
This page has several sections that will provide examples of how to use the Collection fields.
This is what the child collection looks like when the fields are left blank or set to their default setting.
Note: The column width will be determined automatically by the number of items in the child collection.
Note: the "is-multiline" class is added to the collection columns container div no matter what
Note: the Collection Column Class is set to "is-centered" so that the content is centered on tablet screen sizes when the content is narrower than the container width
The text alignment of the child collection is inherited from the Text Align class if the Collection Text Align field is left blank. Here the Text Align field is set to "has-text-centered".
If the Collection Text Align field is set then it will override the Text Align field. Here the Text Align field is set to "has-text-centered" and the Collection Text Align field is set to "has-text-left".
You can use the responsive size typography helper classes to change the size of the titles based on the screen size.
https://bulma.io/documentation/helpers/typography-helpers/#responsive-size
You can use the text color typography helper classes to change the color of the titles.
https://bulma.io/documentation/helpers/color-helpers/#text-color
Note: the class names differ slightly from the bulma docs. Also older sites might not have multiple shades of the primary color. In those cases, you would use "has-text-primary" or "has-text-light-primary".
If you check the Site Colors in the Admin view on the website in the flux you can see the colors that are available.
You can use the text color typography helper classes to change the color of the titles.
https://bulma.io/documentation/helpers/color-helpers/#text-color
You can use the text color typography helper classes to change the case and font weight of the titles.
https://bulma.io/documentation/helpers/typography-helpers/#text-transformation
https://bulma.io/documentation/helpers/typography-helpers/#text-weight
https://bulma.io/documentation/helpers/typography-helpers/#font-family
Note: that on more recent sites you also have classes "has-text-weight-extra-bold" and "has-text-weight-black" in addition to the other Bulma classes
You can use the button helper classes to change the styles of the child collection buttons.
The classes available will be based on the Site Colors which are viewable in the Admin View on each site.
You can have an outlined button instead of a solid button by using the "is-outlined" utility button class.
The classes available will be based on the Site Colors which are viewable in the Admin View on each site.
Using the "is-inverted" utility button class will change the text color to the specified color and the background of the button to the colors color invert.
The classes available will be based on the Site Colors which are viewable in the Admin View on each site.
Note: Every color that is specified in the Site Colors in the Admin view of the website has an inverted color. So dark colors have light inverts and vice versa.
You can also have an outlined inverted button. This is useful when you want to use an outlined button but want the text to be a different color on rollover.
The classes available will be based on the Site Colors which are viewable in the Admin View on each site.
Note: there is a bug on some of the sites where using the "is-outlined" and "is-inverted" classes together will cause an issue where the button text and background color are the same.
