Our Block Theme Styles

Samples of various styles within the theme

Scroll Down

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

Theme Color Palette

All of our themes includes a rich “flat” style color palette with 25 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. You should select lighter text on darker backgrounds, of course.

Off White

Light Gray

Gray

Dark Gray

Darker Gray

Very Dark Gray

Light Green

Green

Bright Green

Dark Bright Green

Yellow

Light Orange

Orange

Dark Orange

Blue

Dark Blue

Midnight Blue

Dark Midn. Blue

Purple

Dark Purple

Light Red

Red

Dark Red

Almost Black

Not Quite Black

Headings

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. That’s why you can’t specify H1 within a page itself.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Alignment

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

Groups

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.

Image (Default Width)

Image (Wide Width)

Image (Full Width)

Cover Image

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

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.

Buttons

Solid Button
Outline Button

Unordered List

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

List (Checkmark style)

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

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

Quote (Large font)

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

@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;
	}
}

Preformatted

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

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

Separators

Categories

Latest Posts

Latest Posts (Bullet style)

Latest Posts (Grid style)

Latest Comments

Latest Comments (Bullet style)

Latest Comments (Avatar, Date, and Excerpt)

css.php