Style Book

A visual guide to styles in the Powder theme for WordPress.

Colors

The Powder theme for WordPress offers designers and developers a versatile foundation with four colors: Base, Contrast, Primary, Neutral.

#ffffff

#000000

#400080

#f5f5f5

These colors, defined in theme.json, ensure balance and consistency, providing a solid foundation for building your website with a cohesive and professional design, while keeping the process simple and effortless.

Buttons

The Button block allows you to add buttons on your website or to an external page. Buttons have two styles (Fill, Outline), five widths (Auto, 25%, 50%, 75%, 100%), and three alignments (Left, Center, Right).

Default

Widths

Alignments

Code

The Code block allows you to add formatted code for others to view. Display HTML, JSON, PHP, JavaScript, or CSS rules and properties.

"color": {
	"palette": [
		{
			"color": "#ffffff",
			"name": "Base",
			"slug": "base"
		},
		{
			"color": "#000000",
			"name": "Contrast",
			"slug": "contrast"
		},
		{
			"color": "#400080",
			"name": "Primary",
			"slug": "primary"
		}
	]
}
"color": {
	"palette": [
		{
			"color": "#ffffff",
			"name": "Base",
			"slug": "base"
		},
		{
			"color": "#000000",
			"name": "Contrast",
			"slug": "contrast"
		},
		{
			"color": "#400080",
			"name": "Primary",
			"slug": "primary"
		}
	]
}

Headings

Headings can help structure your page and make your content more readable by humans as well as search engines. Choose from any of the six headings, ranging from 16px (xSmall) to 30px (xLarge) in size.

H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae lorem a neque imperdiet sagittis. Vivamus et enim velit. Pellentesque dictum enim ut commodo pulvinar. Nam pulvinar ex sit amet vehicula bibendum.

H2 Heading

Quisque ullamcorper nulla eu nisi elementum, at consectetur ex iaculis quis. Vestibulum et faucibus. Quisque vitae mi arcu. Pellentesque massa enim fermentum, dignissim velit vitae, malesuada neque condimentum.

H3 Heading

Mauris sit amet augue sollicitudin, sodales sapien, ultricies erat. Quisque aliquam nisl quis metus iaculis feugiat. Nunc eget odio ornare, laoreet nibh, posuere lorem. Donec nec elementum est, evermora laoreet tortor.

H4 Heading

Maecenas sagittis bibendum condiment. Aliquam ornare condimentum, venenatis in aliquam purus elementum. Aliquam erat volutpat. Duis vel ipsum sollicitudin, volutpat ligula ullamcorper, taylora molestie justo.

H5 Heading

Cras posuere viverra, vel molestie neque aliquet convallis. Fusce tristique augue, et interdum nibh gravida. Etiam mi gravida, viverra elementum, porttitor. Nunc ut auctor lorem, sed imperdiet vitae congue consequat.

H6 Heading

Morbi sapien turpis, luctus quis gravida, hendrerit amet nibh. Consequat efficitur sagittis. Vivamus tempusora justo amet sapien blandit placerat. Curabitur vestibulum dolor accumsan, finibus nulla semper etal lectus.

Quotes

Showcase excerpts of text, inspiring words, or client testimonials. Quotes have one size (Default) and three text alignments (Left, Center, Right).

Align Text Left

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

Align Text Center

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

Align Text Right

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.”

—Walt Disney, Storyteller & CEO

Social Icons

The Social Icons block allows you to add social media icons to any page or post and direct people to your social media profiles. Social Icons have three styles (Logos Only, Default, Outline) with optional labels.