Our Block Theme Styles

Samples of various styles within the theme

Flat Blocks is built specifically for the latest WordPress Block Editor and Full Site Editing capabilities. The following depicts the basic styles of the theme.

Theme Color Palette

All of our themes includes a rich “flat” style color palette with over two dozen colors that are all designed to look great together. Any of these colors can be selected for buttons, groups, columns, paragraphs, etc. You can use them both for background colors as well as foreground colors.

Current Theme Style Colors

Flat Blocks comes with dozens of Theme Styles with different color presets and font pairs that can be mixed and matched. It is best to use these color names so that your content changes colors automatically when you change Theme Styles.

This is the default color scheme and fonts.

Primary

Primary Alt

Secondary

Secondary Alt

Tertiary

Tertiary Alt

Dark

Dark Alt

Base

Contrast

Fore-ground Alt

Neutral

Neutral Alt

All Theme Colors

This is the full color-palette that is always available, regardless of which Theme Style variation is selected.

White

Off White

Very Light Gray

Light Gray

Gray

Dark Gray

Light Green

Green

Bright Green

Dark Bright Green

Light Yellow

Yellow

Light Orange

Orange

Dark Orange

Light Blue

Blue

Dark Blue

Midnight Blue

Dark Midnight Blue

Light Purple

Purple

Dark Purple

Light Red

Red

Dark Red

Very Dark Gray

Almost Black

Not Quite Black

Black

Headings & Alignments

You can use standard H2 through H6 headings which go from large to small. Note that H1 is reserved for page titles because there should only be one per page. H2 is above and H3 through H6 are below.

Heading 3

Heading 4

Heading 5
Heading 6

Of course WordPress has left, center, and right alignment that you can choose from the Block Editor.

Left aligned text

Center aligned text

Right aligned text

Lists

Unordered List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Checkmark Style List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Groups

Group

One of the best features of the new WordPress Block Editor is grouping blocks into “sections”.

These groups contain other blocks, such as headings, paragraphs, images, columns, buttons, etc.

This way, you can build complex layouts like you see on professional websites with “call to action” sections (header, text, and button), “services” or “features” blocks (columns of information), etc.

Media & Text

Phosfluorescently morph intuitive relationships rather than customer directed human capital. Dynamically customize turnkey information whereas orthogonal processes. Assertively deliver superior leadership skills whereas holistic outsourcing. Enthusiastically iterate enabled best practices vis-a-vis 24/365 communities.

Columns

This is left text column.

Appropriately initiate pandemic data via economically sound scenarios. Credibly foster inexpensive methodologies via cross-media leadership. Dramatically monetize seamless infomediaries via principle-centered functionalities. Seamlessly morph cross functional outsourcing via team building meta-services. Intrinsicly embrace installed base products for enabled testing procedures.

This is right text column.

Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces. Intrinsicly engage performance based mindshare with best-of-breed outsourcing.

Quotes

Standard Quote

Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.

– Swami Vivekananda

Large Quote

Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.

– Swami Vivekananda

Pull Quote

Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.

– Swami Vivekananda

Code, Pre-formatted, & Verse

Code

@media only screen and (min-width: 960px) {

	body .alignfull {
		width: auto;
		max-width: 1000%;

		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	body .alignwide {
		width: auto;
		max-width: 1000%;
		margin-right: calc(25% - 25vw);
		margin-left: calc(25% - 25vw);
	}

	.alignwide img,
	.alignfull img {
		display: block;
		margin: 0 auto;
	}
}

Pre-formatted

This is some preformatted text. Preformatted text keeps your s p a c e s, tabs and
linebreaks as they are.

Verse

Write poetry and other literary expressions honoring all spaces and line-breaks.
How now
Brown cow

Tables

Standard Table

Heading 1Heading 2
Row 1 Column 1Row 1 Column 2
Row 2 Column 1Row 2 Column 2
Row 3 Column 1Row 3 Column 2
Footer 1Footer 2
Table Caption

Stripes Style Table

Heading 1Heading 2
Row 1 Column 1Row 1 Column 2
Row 2 Column 1Row 2 Column 2
Row 3 Column 1Row 3 Column 2
Footer 1Footer 2
Table Caption

Calendar

October 2024
M T W T F S S
 123456
78910111213
14151617181920
21222324252627
28293031  

Separators






Images

Default Width

Wide Width

Full Width

Cover Image

This block can be used for a “Hero” section.
Full width has been applied.

Latest Posts

Latest Posts (Bullet Style)

Latest Posts (Grid Style)

Latest Comments

Latest Comments (Standard)

Latest Comments (Bullet Style)

Latest Comments (Avatar, Date, and Excerpt)