Common Properties

Each atom or molecule can have a set of common properties which affect the wrapper of the given atom or molecule.

Property	Type	Description	Supported Values
attributes	array	The html attributes of this molecule or atom	Any. For inline styles and data attributes, use a multidimensional array. See the example for how this works.
align	string	The text alignment	'center', 'left', 'right'
animation	string	The component's animation	'fadein', 'fadeindown', 'slideinleft', 'slideinright'
appear	string	How a component appears through scroll reveal	'bottom', 'left', 'right', 'top'
background	string	The component's background	'blue', 'dark', 'green', 'grey', 'light', 'magenta', 'marine', 'orange', 'purple', 'red', 'yellow', 'white' or any image url, a linear-gradient value or any hex/rgb/hsl value
border	string	The component's border	'blue', 'dark', 'green', 'grey', 'light', 'magenta', 'marine', 'orange', 'purple', 'red', 'yellow', 'white' or any linear-gradient value or any hex/rgb/hsl value
color	string	The component's border	'blue', 'dark', 'green', 'grey', 'light', 'magenta', 'marine', 'orange', 'purple', 'red', 'yellow', 'white' or any hex/rgb/hsl value
display	string	How a component is displayed	'block', 'hidden', 'inline', 'inline-block', 'none'
float	string	The float of a component	'center', 'left', 'right'
grid	string	The column width of a component	'full', 'three-fourth', 'two-third', 'half', 'third', 'fourth', 'fifth'
height	string	The height of a component	'full' (equals 100vh), 'normal' (equals 75vh), 'half' (equals 50vh), 'third' (equals 33vh), 'quarter' (equals 25vh) or any custom css value (e.g. 400px or 30vh)
parallax	boolean	Whether a components background should have the parallax effect	true or false
position	boolean	The position of a component's children through flexbox.	'bottom-center', 'bottom-left', 'bottom-right', 'middle-center', 'middle-left', 'middle-right', 'top-center', 'top-left', 'top-right'
rounded	boolean	Whether a component is rounded or not	true or false
width	boolean	The width of a component	Any css value, such as 400px or 25vw

 

Example

The following example renders a site header with a blue border, green background, which animates through fade-in, has a height of 25vh and appears from the bottom when scrolling. It will have a class site-header and an inline style of margin-top: 40px and a data-src of https://www.destination.com. Also, the item type is set to being http://schema.org/WPHeader.

MakeitWorkPress\WP_Components\Build::molecule('header', [
    'animation'  => 'fadein',
    'appear'     => 'bottom',
    'attributes' => [
        'class'     => 'site-header'
        'data'      => ['src' => 'https://www.destination.com'],
        'itemscope' => 'itemscope'
        'itemtype'  => 'http://schema.org/WPHeader'
        'style'     => ['margin-top' => '40px']
    ],
    'background' => 'green',
    'height'     => 'quarter'
]);