Lark - Flexible Content Blocks

  1. Intoduction
  2. Configuration
  3. Adding new blocks
  4. Block variable defaults
  5. Master container file
  6. Override padding


Built with flexibility-in-mind, the Lark theme uses Advanced Custom Fields or 'ACF' for short to construct all of it's pages. Each page uses Flexible Content, whereby layouts can be created to dynamically create and manage content.


Adding new blocks

A few steps are required when adding a new block.

  1. Each newly added block must have a blade view, add a new file within this directory: web/app/themes/lark-child/resources/views/flexible/blocks

  2. The filename must be constructed with hyphens if it is descriptive, also any 'block' mention is stripped. See example below:

Blockname: Text and Image Block

Filepath: web/app/themes/lark-child/resources/views/flexible/blocks/text-and-image.blade.php



  <!-- HTML goes here... -->


Block variables

Default Padding:

Generally all blocks have consist padding, this is achieved by a flexible configuration variable. Default padding prints the default classes used by each block which should be reviewed from the beginning of each project.

The below example demonstrates that the default padding on every single block is 70 pixels top and bottom however, for mobile the padding changes to 50 pixels on the top and bottom.

return [

    // ...

    'defaultPadding' => 'py-50 md:py-70',


Master container file

This file should not be changed unless extensive testing has been made to ensure consistency is kept across all blocks. By default, a block should contain the below structure, however some blocks have specific variations, the below can be used as example:

@component('components.blocks.container', [
  'noContainer' => true, {{-- don't have a container at all --}}
  'overridePadding' => 'py-50', {{-- override the default padding --}}
  'classes' => 'fcb-blog', {{-- add additional classes to the section --}}
  'overrideContainerClasses' => 'max-w-1300 px-30 md:px-25 mx-auto', {{-- override the default container classes --}}

  {{-- load HTML before the container... --}}
  <x-slot name="beforeContainer">
    {{-- HTML goes here... --}}

  {{-- HTML goes here... --}}

  {{-- load HTML after the container... --}}
  <x-slot name="afterContainer">
    {{-- HTML goes here... --}}


Override Padding