Components Overview

Component List

Laraone comes with a set of both layout and content components that allow for crafting of advanced and beautiful websites in no time.

Layout components that ship with LaraOne are:

  • Container - Used to build advanced layouts
  • Section - Simmilar to Container, used for advanced layouts
  • Columns - Used to create columns quickly
  • Tabs - Used to create tabs, each tab can hold any number of content components
  • Slider - Used to create slides, each slide can hold many content components

Content components that currently ship with LaraOne are:

  • Headline - Adds a headline
  • Text - Text you can edit and style
  • Image - Adds just one image
  • Images - Adds any number of images
  • Youtube - Add Youtube video
  • Button - Inserts a button


Components are rendered by backend using component rendering pipeline. Component definitions like css & html markup are stored directly in Laravel blade views. Upon rendering content (single page or widgets) on the frontend blade views are processed and than embedded into that content at the runtime.

Hierarchy established when authoring content from the Admin Panel is respected by the component rendering engine. All layout and content components will render in the correct order on the frontend.

Component definitions are found under resources\views\content folder

  • blocks - folder where all the components are defined
  • render - folder with "root" components that start the rendering process

Blocks Structure

Inside blocks folder you will find folders that named after components. Inside each component folder you will find 2 files

  • block.blade.php
  • css.blade.php

All components have the exact same structure. Inspect the component blade files to understand how components are composed by using html and css.

Components and Themes

It is possible for themes to override implementation of any components found under resources\views\content. It's necessary for themes to add some logic for components like tabs to open a single tab properly, more on that under themes section. Currently it's up to themes to do both this extra logic and bit of styling to override default look for some layout components.