title: Blocks

-

tags: Blocks, Content

-

+hero: {
    "time": 1634156623752,
    "blocks": [
        {
            "id": "fe-1FPbqzV",
            "type": "section",
            "data": {
                "content": {
                    "time": 1634156623748,
                    "blocks": [
                        {
                            "id": "FmRxDsRsq0",
                            "type": "paragraph",
                            "data": {
                                "text": "<am-fontsize style=\"font-size: 180%;\"><am-lineheight style=\"line-height: 1.5; display: inline-block;\">Blocks are single units of content. There are several types of them. They can be arranged by using the little grip icon to drag them around. ☝️ Check out some examples below.</am-lineheight></am-fontsize>",
                                "large": false,
                                "alignment": "left"
                            },
                            "tunes": {
                                "layout": {
                                    "width": false,
                                    "stretched": false
                                }
                            }
                        }
                    ],
                    "version": "2.22.2",
                    "automadVersion": "1.9.0"
                },
                "style": {
                    "backgroundColor": "#F4F5F7",
                    "paddingTop": "11.25rem",
                    "paddingBottom": "7rem"
                },
                "justify": "start",
                "gap": true,
                "minBlockWidth": ""
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": true
                }
            }
        }
    ],
    "version": "2.22.2",
    "automadVersion": "1.9.0"
}

-

+main: {
    "time": 1636309873754,
    "blocks": [
        {
            "id": "VvHQ0VKT-X",
            "type": "header",
            "data": {
                "text": "Images",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "eHtpFfXlWE",
            "type": "paragraph",
            "data": {
                "text": "The <i>Image Gallery</i> block provides an easy way to generate beautiful grid layouts. Clicking an image in the grid opens a <i>lightbox</i> slideshow in fullscreen.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "IATduGYOFp",
            "type": "gallery",
            "data": {
                "globs": "https://source.unsplash.com/ueJ2oJeEK-U/900x900, https://source.unsplash.com/Uxqlfigh6oE/900x1600, https://source.unsplash.com/zSgzGRdJmMY/1600x900, https://source.unsplash.com/Exiil1L7hQI/1600x900, https://source.unsplash.com/gj1dnc7yRG0/1600x900, https://source.unsplash.com/frnNGfhsAN4/900x900, https://source.unsplash.com/jSbBnR22cXc/900x1600, https://source.unsplash.com/nWidMEQsnAQ/1600x900, https://source.unsplash.com/lauuoxHBK5k/1600x900",
                "layout": "vertical",
                "width": "150px",
                "height": "10rem",
                "gap": "2px",
                "cleanBottom": true
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "Gekn9jmeeg",
            "type": "paragraph",
            "data": {
                "text": "By default all images are arranged in a masonry layout with <i>coulmns</i>. Optionally the grid can be modified to have a clean bottom edge. Alternatively it is also possible to use a <i>row layout</i> instead.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "mVZAL1xR5y",
            "type": "gallery",
            "data": {
                "globs": "https://source.unsplash.com/Uxqlfigh6oE/900x1600, https://source.unsplash.com/nWidMEQsnAQ/1600x900, https://source.unsplash.com/frnNGfhsAN4/900x1600, https://source.unsplash.com/zSgzGRdJmMY/1600x900, https://source.unsplash.com/gj1dnc7yRG0/1600x900, https://source.unsplash.com/ueJ2oJeEK-U/900x1600, https://source.unsplash.com/Exiil1L7hQI/1600x900, https://source.unsplash.com/jSbBnR22cXc/900x1600",
                "layout": "horizontal",
                "width": "250px",
                "height": "9rem",
                "gap": "2px",
                "cleanBottom": true
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "AhSqGmlJoi",
            "type": "paragraph",
            "data": {
                "text": "Image selections can also be displayed as slideshows. They can be configured to show controls and change images automatically.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "2QMT_kimJV",
            "type": "slider",
            "data": {
                "globs": "https://source.unsplash.com/q2xKzfyg83w/1600x900, https://source.unsplash.com/PzYgEB4_pa0/1600x900, https://source.unsplash.com/Exiil1L7hQI/1600x900, https://source.unsplash.com/lauuoxHBK5k/1600x900",
                "width": 1600,
                "height": 900,
                "dots": true,
                "autoplay": true
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "ln2JKfYM84",
            "type": "paragraph",
            "data": {
                "text": "Single images can be used as well. They can have captions and may also be used as links to other pages.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "uOOlxTVZHP",
            "type": "image",
            "data": {
                "url": "https://source.unsplash.com/gj1dnc7yRG0/1600x900",
                "caption": "This is a caption",
                "link": "#text-content"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "N2qLJsXKfE",
            "type": "header",
            "data": {
                "text": "Text Content",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "3cmwYuNHyC",
            "type": "paragraph",
            "data": {
                "text": "The default block is just a simple paragraph containing text content. Text can be easily <b>styled</b> using inline <i>styles</i>. Paragraphs can also be converted to lists or headlines.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "1J0JndoWfw",
            "type": "lists",
            "data": {
                "style": "unordered",
                "items": [
                    {
                        "content": "This is a List Item of an unordered list.",
                        "items": []
                    },
                    {
                        "content": "Another List Item. List can also be ordered!",
                        "items": []
                    },
                    {
                        "content": "And a Third One, you get it ...",
                        "items": []
                    }
                ]
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "Z02OFLaICl",
            "type": "table",
            "data": {
                "withHeadings": true,
                "content": [
                    [
                        "This is a ",
                        "Table Header"
                    ],
                    [
                        "And this are ",
                        "some rows"
                    ],
                    [
                        "and some ",
                        "columns"
                    ]
                ]
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "MKc4VIfk9y",
            "type": "quote",
            "data": {
                "text": "This is a super important and awesome quote! Please read it carefully!<br>",
                "caption": "by Me",
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "lA3ztRvkx6",
            "type": "header",
            "data": {
                "text": "Embedded",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "1wIDOF3u0o",
            "type": "paragraph",
            "data": {
                "text": "Just paste any link to YouTube or Vimeo videos, Twitter posts, Soundcloud pages or CodePens to embed them into your page.&nbsp;",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "89zMiYNNTa",
            "type": "embed",
            "data": {
                "service": "youtube",
                "source": "https://www.youtube.com/watch?v=a021NEVTxBw",
                "embed": "https://www.youtube.com/embed/a021NEVTxBw",
                "width": 16,
                "height": 9,
                "caption": ""
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "ETYZEpZlwQ",
            "type": "embed",
            "data": {
                "service": "mixcloud",
                "source": "https://www.mixcloud.com/marcantondahmen/home-session-022/",
                "embed": "https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=/marcantondahmen/home-session-022/",
                "height": 180,
                "caption": ""
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "v4yDJfMTQV",
            "type": "header",
            "data": {
                "text": "Navigation",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "H0IIyvrPy7",
            "type": "buttons",
            "data": {
                "primaryText": "A Button&nbsp;",
                "primaryLink": "#navigation",
                "primaryStyle": {
                    "borderColor": "#181818",
                    "hoverBorderColor": "#181818",
                    "hoverBackground": "#181818",
                    "hoverColor": "#FFFFFF",
                    "paddingHorizontal": "2rem",
                    "borderWidth": "2px"
                },
                "secondaryText": "A Second One",
                "secondaryLink": "#navigation",
                "secondaryStyle": {
                    "paddingHorizontal": "2rem",
                    "borderWidth": "2px"
                },
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "f_AeXrS8pT",
            "type": "paragraph",
            "data": {
                "text": "Generate page cards automatically using the <i>pagelist</i> block with the <i>blog</i> template.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "NacZ3V1DgV",
            "type": "pagelist",
            "data": {
                "type": "all",
                "excludeHidden": true,
                "matchUrl": "",
                "filter": "",
                "template": "",
                "limit": "2",
                "offset": "0",
                "sortKey": ":path",
                "sortOrder": "asc",
                "file": "/standard/templates/blocks/pagelist/blog.php"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "vPQv7mE6HY",
            "type": "paragraph",
            "data": {
                "text": "Or the standard <i>portfolio</i> template ...",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "RUblI-wgLL",
            "type": "pagelist",
            "data": {
                "type": "all",
                "excludeHidden": true,
                "matchUrl": "",
                "filter": "",
                "template": "",
                "limit": "2",
                "offset": "0",
                "sortKey": ":path",
                "sortOrder": "desc",
                "file": "/standard/templates/blocks/pagelist/portfolio.php"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "t85UTEze6B",
            "type": "paragraph",
            "data": {
                "text": "... a <i>simple</i> template ...",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "Q6yEpj3X4O",
            "type": "pagelist",
            "data": {
                "type": "all",
                "excludeHidden": true,
                "matchUrl": "",
                "filter": "",
                "template": "",
                "limit": "2",
                "offset": "0",
                "sortKey": ":path",
                "sortOrder": "asc",
                "file": "/standard/templates/blocks/pagelist/simple.php"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "GRzbDzIl6C",
            "type": "paragraph",
            "data": {
                "text": "... or just <i>images</i>.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "3OqAlozFDx",
            "type": "pagelist",
            "data": {
                "type": "all",
                "excludeHidden": true,
                "matchUrl": "",
                "filter": "",
                "template": "",
                "limit": "2",
                "offset": "0",
                "sortKey": ":path",
                "sortOrder": "asc",
                "file": "/standard/templates/blocks/pagelist/images.php"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "F9DKf8rJga",
            "type": "paragraph",
            "data": {
                "text": "Create a list of files defined by one ore more glob patterns using the <i>filelist</i> block.",
                "large": false,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "GbIu_U3Wwx",
            "type": "filelist",
            "data": {
                "file": "Default Template",
                "glob": "/shared/*.png, /shared/*.ico"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "cYDflfdB1J",
            "type": "header",
            "data": {
                "text": "Code",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "sj5rQFdDaR",
            "type": "code",
            "data": {
                "code": "<div class=\"title\">\n    Automad is Awesome!\n</div>"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "UKPHRHfQ0E",
            "type": "header",
            "data": {
                "text": "Email",
                "level": 2,
                "alignment": "left"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        },
        {
            "id": "iSuaZReijt",
            "type": "mail",
            "data": {
                "to": "hello@test.de",
                "error": "Please fill out all fields!",
                "success": "Successfully sent email!",
                "placeholderEmail": "Your email address",
                "placeholderSubject": "Email subject",
                "placeholderMessage": "Message body",
                "textButton": "Send Mail"
            },
            "tunes": {
                "layout": {
                    "width": false,
                    "stretched": false
                }
            }
        }
    ],
    "version": "2.22.2",
    "automadVersion": "1.9.3"
}

-

colorPageText: #1F2022

-

colorPageBorder: #eaebed

-

colorCardText: #1F2022

-

colorCardBackground: #F4F5F7

-

colorCardBorder: #F4F5F7

-

colorCodeBackground: #F4F5F7

-

colorNavbarBackground: #F4F5F7

-

colorNavbarBorder: #eaeaeb

-

checkboxHideTitle: 1

-

checkboxMakeNavbarTransparent: 1

-

imageCard: https://source.unsplash.com/hrMav18bnsc/800x800