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' or any of the animation names defined by animate.css, for example 'bounce'. For all animate.css names to work, you have to configure animate and set it to true while booting the instance. It's not loaded by default.
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
boxshadow	string or array	The component's box-shadow	'blur5', 'blur10', 'blur15', 'blur20', 'blur25', 'blur30', 'blur35', 'blur40', 'blur45', 'blur50', 'blur55', 'blur60', 'blur65', 'blur70', 'blur75', 'blur80', 'blur85', 'blur90', 'blur95' and 'blur100' for a dark-colored box-shadow with the given blur. Or pass an array with the keys 'x', 'y', 'blur', 'spread', 'type' for the given box-shadow values. For example, pass ['x' => '5px', 'y' => '5px', 'blur' => '5px']
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'
hover	string	The hover effect for the component	Accepts hover.css values such as 'grow' or 'icon-forward' if the component has an icon. For this to work, you need to set the hover configuration while booting the instance. Some components can also have hover classes added to parts of the component, such as a hover class for each social button.
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)
boxshadow	string or array	The component's box-shadow	'opacity5', 'opacity10', 'opacity15', 'opacity20', 'opacity25', 'opacity30', 'opacity35', 'opacity40', 'opacity45', 'opacity50', 'opacity55', 'opacity60', 'opacity65', 'opacity70', 'opacity75', 'opacity80', 'opacity85', 'opacity90', 'opacity95' and 'opacity100' for a black overlay with the given opacity (where 5 equals to 0.05 opacity). Or pass an array with the keys 'color', and 'opacity'. For example, ['color' => '#f07', 'opacity' => '0.5']
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'
]);