Colors

Powder offers a tailored color palette: Base, Contrast, Primary.

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 effortless.

Buttons

The Button block makes it simple to add buttons to your website. 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.

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#440099",
					"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.

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, 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.

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 four styles (Logos Only, Default, Outline, Square) with optional labels.