Blocks
The blocks of Elio Blocks, their attributes and what they support, from their block.json. Generated from the code of Elio Blocks 1.0.0.
Weather
elio/weather-report
Display the current weather and forecast for a location.
Provides context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/reportIconCollection
Supports: align, anchor, ariaLabel, interactivity, background (backgroundImage, backgroundSize, gradient), color (background, text, gradients, heading, button, link), shadow, spacing (padding, margin, blockGap), dimensions (minHeight, minWidth), border (radius, color, width, style), typography (fontSize, lineHeight, fontFamily, fontWeight, fontStyle, textTransform, textDecoration, letterSpacing), layout (allowSizingOnChildren), allowedBlocks
| Attribute | Type | Default | Values |
|---|---|---|---|
location | object | ||
provider | string | ||
units | string | ||
iconCollection | string | ||
tagName | string | "section" | div, section, article |
Cloud Cover
elio/cloud-cover
Display the cloud cover percentage.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Condition Description
elio/condition-description
Display the weather condition description.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Condition Icon
elio/condition-icon
Display an icon of the weather condition.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/reportIconCollection, elio/forecastType, elio/forecastCount, elio/forecastItem
Supports: align (left, center, right), anchor, interactivity, color (background, text), border (color, radius, style, width), spacing (padding, margin), dimensions (width)
| Attribute | Type | Default | Values |
|---|---|---|---|
isDecorative | boolean | false | |
strokeWidth | number | ||
iconCollection | string |
Daily Temperature
elio/daily-temperature
Display the minimum or maximum temperature, or feels like temperature, of a forecast day.
Ancestor: elio/forecast-template
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fitText, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | "min" | min, max, feels-like-min, feels-like-max |
showUnit | boolean | true | |
unitFormat | string | ||
showPrefix | boolean | false | |
prefix | string |
Date & Time
elio/datetime
Display the date or time of the current conditions or of a forecast item.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | date, time | |
format | string | ||
currentAsLabel | boolean | false | |
todayLabel | string | ||
nowLabel | string | ||
showPrefix | boolean | false | |
prefix | string |
Forecast
elio/forecast
Display a daily or hourly forecast.
Ancestor: elio/weather-report
Provides context: elio/forecastType, elio/forecastCount
Supports: interactivity (clientNavigation), align (wide, full), anchor, background (backgroundImage, backgroundSize, gradient), color (background, text, gradients, heading, button, link), shadow, spacing (padding, margin, blockGap), border (color, radius, style, width), typography (fontSize, lineHeight, fontFamily, fontWeight, fontStyle, textTransform, textDecoration, letterSpacing), layout
| Attribute | Type | Default | Values |
|---|---|---|---|
type | string | "daily" | daily, hourly |
count | number | 7 |
Forecast Template
elio/forecast-template
Contains the blocks used to render each forecast item, like the date, condition icon, temperature, and more.
Ancestor: elio/forecast
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastType, elio/forecastCount
Supports: interactivity, layout, align (wide, full), anchor, color (background, text, gradients, link), typography (fontSize, lineHeight, fontFamily, fontWeight, fontStyle, textTransform, textDecoration, letterSpacing), spacing (margin, padding, blockGap), border (radius, color, width, style)
Hourly Temperature
elio/hourly-temperature
Display the temperature or feels like temperature of a forecast hour.
Ancestor: elio/forecast-template
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fitText, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | "current" | current, feels-like |
showUnit | boolean | true | |
unitFormat | string | ||
showPrefix | boolean | false | |
prefix | string |
Humidity
elio/humidity
Display the relative humidity.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Last Updated
elio/last-updated
Display when the weather data was last updated.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
format | string | ||
showPrefix | boolean | true | |
prefix | string |
Location
elio/location
Display the location name or coordinates.
Ancestor: elio/weather-report
Uses context: elio/reportLocation
Supports: interactivity (clientNavigation), align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | "name" | name, coordinates |
level | number | 2 | |
levelOptions | array |
Precipitation
elio/precipitation
Display the precipitation amount.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Precipitation Probability
elio/precipitation-probability
Display the probability of precipitation.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
Pressure
elio/pressure
Display the atmospheric pressure.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Provider Attribution
elio/provider-attribution
Credit the provider of the weather data, as its license requires.
Ancestor: elio/weather-report
Uses context: elio/reportProvider
Supports: interactivity (clientNavigation), align (wide, full), anchor, color (background, text, link, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform)
| Attribute | Type | Default | Values |
|---|---|---|---|
linkTarget | string | "_self" | _self, _blank |
style | object | {"typography":{"fontSize":"0.75em","textAlign":"center"}} |
Sun Event
elio/sun-event
Display the sunrise or sunset time.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | "sunrise" | sunrise, sunset |
format | string | ||
showPrefix | boolean | false | |
prefix | string |
Temperature
elio/temperature
Display the current temperature or feels like temperature.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | "current" | current, feels-like |
unitFormat | string | ||
showUnit | boolean | true | |
showPrefix | boolean | false | |
prefix | string |
UV Index
elio/uv-index
Display the UV index.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
showPrefix | boolean | false | |
prefix | string |
Wind Direction
elio/wind-direction
Display the wind direction as a cardinal point or in degrees.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayFormat | string | "cardinal" | cardinal, degrees |
showPrefix | boolean | false | |
prefix | string |
Wind Speed
elio/wind-speed
Display the wind speed or wind gusts.
Ancestor: elio/weather-report
Uses context: elio/reportLocation, elio/reportProvider, elio/reportUnits, elio/forecastItem
Supports: interactivity, align (wide, full), anchor, border (color, radius, style, width), color (background, text, gradients), spacing (margin, padding), typography (fontSize, lineHeight, textAlign, fontFamily, textDecoration, fontStyle, fontWeight, letterSpacing, textTransform, writingMode, fitText)
| Attribute | Type | Default | Values |
|---|---|---|---|
displayType | string | speed, gusts | |
showPrefix | boolean | false | |
prefix | string |