Umbraco.Community.QuickBlocks 1.0.0

dotnet add package Umbraco.Community.QuickBlocks --version 1.0.0
NuGet\Install-Package Umbraco.Community.QuickBlocks -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Umbraco.Community.QuickBlocks" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Umbraco.Community.QuickBlocks --version 1.0.0
#r "nuget: Umbraco.Community.QuickBlocks, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Umbraco.Community.QuickBlocks as a Cake Addin
#addin nuget:?package=Umbraco.Community.QuickBlocks&version=1.0.0

// Install Umbraco.Community.QuickBlocks as a Cake Tool
#tool nuget:?package=Umbraco.Community.QuickBlocks&version=1.0.0


Downloads NuGet GitHub license

A package for quickly building block list based Umbraco websites all from data attributes in your HTMl


At the moment, it is best to use this on a brand new empty umbraco site. You can create your empty site and install QuickBlocks using these commands. You should be able to paste it all into the command line.

# Ensure we have the latest Umbraco templates
dotnet new -i Umbraco.Templates

# Create solution/project
dotnet new sln --name "MySolution"
dotnet new umbraco --force -n "MyProject" --friendly-name "Administrator" --email "" --password "1234567890" --development-database-type SQLite
dotnet sln add "MyProject"

#Add QuickBlocks
dotnet add "MyProject" package Umbraco.Community.QuickBlocks --prerelease 

dotnet run --project "MyProject"

Watch this video to see how I use it.

<a href="" target="blank"> <img src="" alt="QuickBlocks Introduction Video" /> </a>

Data Attributes

Here are some examples

Home Page and Block List Property

<div data-content-type-name="Home Page" 
     data-prop-name="Main Content" 
     data-prop-type="[BlockList] Main Content"
     data-list-name="Main Content">

Add a row

<section data-row-name="Simple Link">

Add a property to the row

<a href="#" data-prop-name="Link">My Link</a>

<img src="#" data-prop-name="Image" />

<h2 data-prop-name="Image">Hello</h2>

<p data-prop-name="Description">
     My content in here

Preview View and CSS

If you are using the package Umbraco.Community.BlockPreview you can add this to the block list to set the preview path and css on all blocks. This can be set on an individual row too.

<div data-content-type-name="Home Page" 
     data-prop-name="Main Content" 
     data-prop-type="[BlockList] Main Content"
     data-list-name="Main Content"


Or if you'd prefer to use your own preview file you can specify it like this

<div data-content-type-name="Home Page" 
     data-prop-name="Main Content" 
     data-prop-type="[BlockList] Main Content"
     data-list-name="Main Content"


Specify a different data type

<h2 data-prop-name="Title" data-prop-type="Richtext editor">

Use an image as a background image

<header style="background-image: url('[!image!]')" data-row-name="Header" data-prop-name="Image" data-replace-marker="[!image!]" data-replace-inner="false" data-prop-type="Image Media Picker">
<a href="#" data-prop-name="Social Links" 
     data-prop-type="Multi URL Picker" 
          <i class="fa fa-[!name!]"></i>

Create a list property inside a row

In the sub list items, we don't need to specify the property location, we only do that for row or page properties.

<div data-row-name="Services">
     <h2 class="title" data-prop-name="Title">We build awesome products</h2>
     <h5 class="description" data-prop-name="Description">This is the paragraph where you can write more details </h5>
     <div data-sub-list-name="Service List" 
          data-prop-type="[BlockList] Service List" 
          <div data-item-name="Service Item">
               <h4 class="info-title" data-prop-name="Title">1. Design</h4>
               <p data-prop-name="Description">blah blah blah</p>
               <a data-prop-name="Link" href="#pablo">Find more...</a>

Move some HTML to a partial view

<footer data-partial-name="Footer">

Extra block list options

Max Width
Single block mode
Live editing mode
Inline Editing
List Min Items
List Max Items

Extra row options

Block Row Icon
Block Row Icon Colour
Block Row Label Property


Contributions to this package are most welcome! Please read the Contributing Guidelines.


Thanks to my employers ClerksWell for allowing me some time during my work day to work on this project on top of my own spare time.

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0 337 6/7/2023
1.0.0-alpha-04 108 5/17/2023
1.0.0-alpha-03 110 5/15/2023
1.0.0-alpha-02 108 5/12/2023