The following colours are available as custom CSS property values, managed via the Blocksy customize interface.
General
theme-palette-color-1
theme-palette-color-2
theme-palette-color-3
theme-palette-color-4
theme-palette-color-5
theme-palette-color-6
theme-palette-color-7
theme-palette-color-8
Text
theme-text-color
theme-headings-color
theme-link-initial-color
theme-link-hover-color
theme-selection-text-color
theme-selection-background-color
Border
theme-border-color
Buttons
theme-button-text-initial-color
theme-button-text-hover-color
theme-button-background-initial-color
theme-button-background-hover-color
Forms
theme-form-field-border-initial-color
theme-form-field-border-focus-color
theme-form-selection-field-initial-color
theme-form-selection-field-active-color
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Paragraphs & Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Large Text
.u-text-large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Small Text
.u-text-small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tables
| White | Blue | Black | Red | Green |
|---|---|---|---|---|
| Austere | Cryptic | Profane | Incendiary | Primal |
| Cataclysmic | Torrential | Noxious | Combustible | Verduous |
| Misty Rainforest | Verdant Catacombs | Marsh Flats | Scalding Tarn | Arid Mesa |
| Polluted Delta | Windswept Heath | Flooded Strand | Bloodstained Mire | Wooded Foothills |
title
Title to display on the toggle
content
Conted within the accordion
icon.open
Icon to display when open.
icon.closed
Icon to display when closed.
icon.position
before or after the title.Hello, World!
Icon before label, auto-open
Hello, World!
Accordion group
Add the data-accordion-group attribute to a common parent to ensure only one accordion is open at a time.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Component
A backdrop component that will display media (image/picture/video) with a background-size: cover style display to fit it into varying aspect ratio containers.
shadow
Darken the backdrop content with an overlay.
focus
Applied to css property 'object-position' which attempts to keep a certain area of the backdop in view.
media
The contents of the backdrop
Basic
Shadow overlay
Focal point
Pass a value for CSS object-position via the focus property.
Can be as simple as top or bottom right, or more specific like 23% 67%.
items
Array of link items. Each item has a
text and url property.Custom Dividers
text
The button Text
url
The URL to link to. Only applies if the 'a' (anchor) element is being used.
element
The HTML element to use for the button. Either 'a', 'button', or 'input'. Defaults to 'a'.
color
The button color. Value should be a valid theme colour name
text_color
The button text color. Value should be a valid theme colour name
size
The button size variant. Small or Large. Omit for regular sizing.
icon
The icon name without the .svg extension relative to the theme's icon directory in source/images/icons. Examples: 'pin', 'arrows/right'
icon_position
The icon position relative to the button text. Either 'before' or 'after'. Defaults to before if omitted.
Sizes
Size can be one of normal (default), small, or large.
Colours
Supports most theme colours and aliases, as defined in variables/colors.scss
Text Colours
Text colour added via a utility class. Generally, only black or white should be used.
Icons
Icons can be placed before (default) or after the label.
Round
Works with default and outline variants
Elements
Buttons defaults to <a>. Be sure to provide a "URL" in this mode. The button pattern can also be changed to use <button> instead.
title
Title
body
Body
link
Link
backdrop
Backdrop
Backdrop
Title
Body
slides
Slides
swiper_settings
Swiper.js Settings as an array of settings
dormant
Set to true to make the carousel dormant. A dormant Carousel will not immediately initialize itself. Useful for Carousels that start hidden.
pagination
Set to 'dots' to enable default pagination, set to 'thumbs' to enable image pagination
thumb_slides
Slides when pagination is set to 'thumbs'
thumbs_swiper_settings
Swiper.js Settings as an array of settings for the thumbnail pagination
navigation
Set to true to enable enable prev/next navigation between slides
navigation_previous_label
Set the previous navigation button label, if navigation is enabled
navigation_next_label
Set the next navigation button label, if navigation is enabled
Basic Carousel
Carousel with Pagination & Navigation
Carousel with Thumbs Pagination
slides
Slides
swiper_settings
Swiper.js Settings as an array of settings
pagination
Set to true to enable pagination, set to 'thumbs' to enable image pagination
navigation
Set to true to enable enable prev/next navigation between slides
navigation_previous_label
Set the previous navigation button label, if navigation is enabled
navigation_next_label
Set the next navigation button label, if navigation is enabled
modal
Enables modal
image_nav
Enables image navigation
gallery_type
Set to grid to enable grid gallery, default is carousel
breakpoints
Set key value pair as 'breakpoint':'columns' (Example: xl:three)
gap
Set to sm, md, lg, or xl to set gap size
Component
A title section for with an optional super and subtitle. This is primarily used for page titles and other similar page-level title content.
title
Main heading
before
Optional content, displayed inline with the primary heading.
after
Optional content, displayed inline with the primary heading.
supertitle
Optional text to appear above the main title.
subtitle
Optional text to appear below the main title.
url
Optional. The URL to link the main heading text to.
level
The heading level for the main title element. Defaults to 1.
Minimum content
A heading can be just a title
Linked
Optional URL field wraps main headline in anchor.
Everything
Before, after, supertitle, and subtitle can be basically anything.
Heading Levels
Accepts a level value of 1 through 6 used to set the title element.
Level 1
Level 2
Level 3
Level 4
Level 5
Level 6
Component
Large banner element with background image and inner content, usually found at the top of a page
display_title
Show the title or not
title
The text of the title
height
Height of the hero. See styles for options but generally supports
half, tall, cover, and sixteenbynine.
field_name
field_description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi diam, mollis sed neque a, cursus sagittis mi.
Aenean ac lorem id mi facilisis congue a sodales quam. Praesent fermentum eros massa, eu cursus sem pulvinar vitae. Nulla auctor sit amet velit imperdiet commodo. Sed lectus lorem, aliquam in pharetra id, mattis bibendum erat. Phasellus sed leo sed magna hendrerit accumsan. Sed nec ex vitae odio lobortis pharetra vitae ac est.
title
Title
body
Body
link
Link
image
Image
Title
Body
Image
value
Numeric value representing this stat.
value_prefix
Optional. Good for units, etc.
value_suffix
Optional. Good for units, etc.
title
Optional title text above the value.
description
Optional descriptive text below the value
settings.duration
CountUp.js setting. Duration of countup animation. Defaults to 2.
Important Number
1234+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Layout
Multiple sections of content, which display as tabs on larger screens, and accordions on smaller ones.
groups
An array of objects, each with a
name and content property. Name should be a string. Content can be anything.Complex content
Group name should be a simple string, but content can be basically anything.
Hello, World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, condimentum id dui non, placerat hendrerit enim. Vivamus fermentum turpis vitae lacus bibendum, eu mattis odio luctus. Aenean dapibus malesuada fringilla. Sed fermentum ex at vestibulum faucibus. Quisque cursus leo eros, pharetra lobortis nisl rutrum in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, condimentum id dui non, placerat hendrerit enim. Vivamus fermentum turpis vitae lacus bibendum, eu mattis odio luctus. Aenean dapibus malesuada fringilla. Sed fermentum ex at vestibulum faucibus. Quisque cursus leo eros, pharetra lobortis nisl rutrum in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, condimentum id dui non, placerat hendrerit enim. Vivamus fermentum turpis vitae lacus bibendum, eu mattis odio luctus. Aenean dapibus malesuada fringilla. Sed fermentum ex at vestibulum faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, condimentum id dui non, placerat hendrerit enim. Vivamus fermentum turpis vitae lacus bibendum, eu mattis odio luctus. Aenean dapibus malesuada fringilla. Sed fermentum ex at vestibulum faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris justo metus, condimentum id dui non, placerat hendrerit enim. Vivamus fermentum turpis vitae lacus bibendum, eu mattis odio luctus. Aenean dapibus malesuada fringilla. Sed fermentum ex at vestibulum faucibus.
Single Group
Multiple groups should be provided, but only providing a single group shouldn't break anything.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper lacus ut tincidunt vestibulum. Nunc in porttitor risus. Etiam accumsan elit purus, pretium lobortis nulla facilisis sed. Praesent a ultrices purus. Quisque magna enim, fringilla pellentesque justo at, commodo convallis odio.
Layout
A layout focused on a single row. Supports multiple rows (wrap), but recommended to instead use the Layout Grid component for multi-row layouts.
content
An array of items to be rendered, or a single chunk of content that has been organized.
columns
Columns per row.
Alternatively, a space separated list of column settings items.
eg: xs:one sm:two md:three lg:four xl:five
Each item consists of breakpoint id at which the setting is active, a colon, and a column count in word form. If a breakpoint is missing a column count, it will appear stacked at that breakpoint. Alternatively, this setting may be a single column count in word form, which applies that column count at ALL breakpoints.
If using a specific number of columns, consider using the Layout Grid component instead.
wrap
Enables flex wrap.
If you need this, you should probably be using Grid.
wrap_items
Wraps each item in an element. Useful for styling, or if each item isn't a single element.
gap
A space separated list of gap settings items. Each item consists of breakpoint id at which the setting is active, a colon, and a gap size id. If a breakpoint is missing a gap size, gaps will not be applied at that breakpoint.
Alternatively, this setting may be a single gap size id, which applies that gap size at ALL breakpoints.
align
Vertical alignment of content. If some content is shorter, where should it go? (up/down)
justify
Vertical alignment of content. If some content is shorter, where should it go? (up/down)
Gap Size
See gap setting.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Columns
See columns setting.
auto
auto
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
fill
fill
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
equal
equal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Align
Align the contents of each row. See alignment setting.
default
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
default
start
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
start
center
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
center
end
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
end
Justify
Justify the contents of each row. See justify setting.
flex-start
flex-start
flex-start
flex-end
flex-end
flex-end
center
center
center
space-between
space-between
space-between
space-around
space-around
space-around
space-evenly
space-evenly
space-evenly
Layout
A general grid for most use cases. Supports per-breakpoint settings for columns and gaps.
content
An array of items to be rendered, or a single chunk of content that has been organized.
columns
Columns per row, eg three.
Alternatively, a space separated list of column settings items.
eg: xs:one sm:two md:three lg:four xl:five
Each item consists of breakpoint id at which the setting is active, a colon, and a column count in word form. If a breakpoint is missing a column count, it will appear stacked at that breakpoint. Alternatively, this setting may be a single column count in word form, which applies that column count at ALL breakpoints.
wrap_items
Wraps each item in an element. Useful for styling, or if each item isn't a single element.
gap
A space separated list of gap settings items. Each item consists of breakpoint id at which the setting is active, a colon, and a gap size id. If a breakpoint is missing a gap size, gaps will not be applied at that breakpoint.
Alternatively, this setting may be a single gap size id, which applies that gap size at ALL breakpoints.
align
Vertical alignment of content. If some content is shorter, where should it go? (up/down)
Gap Size
See gap setting.
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum
Independent X, Y gaps
style="--gapX: 40px; --gapY:10px;"
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Alignment
Align the contents of each row. See alignment setting.
Center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non sem nec nisi dictum aliquam. Etiam imperdiet mollis nisi nec venenatis.
Duis gravida felis quis justo pellentesque, non blandit augue gravida. Aliquam id convallis eros. Quisque non gravida sem. Proin consectetur convallis velit, feugiat pulvinar augue eleifend in. Pellentesque pharetra, velit vitae vehicula vulputate, dolor lorem ullamcorper nunc, eget feugiat magna enim ut ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non sem nec nisi dictum aliquam. Etiam imperdiet mollis nisi nec venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
End
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non sem nec nisi dictum aliquam. Etiam imperdiet mollis nisi nec venenatis.
Duis gravida felis quis justo pellentesque, non blandit augue gravida. Aliquam id convallis eros. Quisque non gravida sem. Proin consectetur convallis velit, feugiat pulvinar augue eleifend in. Pellentesque pharetra, velit vitae vehicula vulputate, dolor lorem ullamcorper nunc, eget feugiat magna enim ut ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non sem nec nisi dictum aliquam. Etiam imperdiet mollis nisi nec venenatis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Columns
One to twelve columns. See columns setting.
1
1
2
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12