# Blocks

Blocks are the content sections of a Webkit site. Each Block is imported into App.vue by Webpack and displayed in the order specified in the configuration. Block components are located in ./src/components/blocks.

Modifying Block Components

It is recommended to avoid editing these components directly, unless you are working on your own development fork. There are many configuration and styling options available for each block, without the need to modify the components themselves.

The Header Block includes two child components:

  • The Menu View displays a responsive menu of all Sections defined with an id property or an array of custom links.
  • The Hero View displays the introductory content of a Webkit site.

In the default template there are three Hero Views to choose from, these are specified in the type property.

The example below displays a Header with Menu and Standard Hero views.

    # Content

    Content Blocks are generic containers for views. They can be configured to display a wide variety of views including html, text, images, videos, forms and more.

    Content Blocks are the most flexible components in the Webkit and can be used entirely without a Discourse instance if required.

    # Configuration

    property default description
    title "" string
    subtitle "" string
    id "" string
    views [] array of views (see Views)
    style {} object with style parameters (see Styling)

    For more on the Views available for this block, see the Views section the guide.

    # Example

    The example below demonstrates use of a Content Block with Text, Image and Form Views in a vertical layout.

      # Topics

      The Topics Block fetch an array of topics from Discourse based on a tag or category id specified in the configuration. Topics can be displayed in multiple views, including List, Grid and Slider.

      The example below showcases the three default views presenting topics tagged webcontent-ngi-summit-2020-topics. For more on how these Views work and their configuration refer to the Views section of the guide.

        # Events

        The Events Block fetches an array of topics tagged as an event from Discourse. The Events Block has three default views: List, Grid and Schedule.

        The example below showcases the three default views presenting events tagged webcontent-ngi-summit-2020-event.

        For more on how these Views work and their configuration refer to the Views section of the guide.

          The Footer Block is the last section of the site and typically and contains a sitemap, terms, logos and about text.