These are just some sample type treatments that will follow this text is in a text-lg box, to use buttons in any background color to best effect it is best practice to use the default button which has declared context aware styling. All other button colors are always the same regardless of context. Outside the Group Block this type size will not be inherited Groups are a great way to apply text size and color styling to elements within columns
this section details
this section has an pad-xl-vert applied. you will find the list of these classes in following column. this section’s row also has a flex class applied that will align the items to the bottom of the column. Flex classes come in 4 varities the syntax for their use is flex-(SCREENSIZE)-(flex Alignment)-(nowrap) to align the items in a given row. This row’s class that has been used is flex-sm-center the columns are allowed to wrap because a ‘-nowrap’ was not added to the class. An alternative usefull class would be flex-md-stretch one we use quite often here. The Screen size xs / sm / md / lg defines which screen size and ABOVE the flex row will have a given effect on.
Lpadding classes are now Size and Screen Resolution dependant the following format is used to declare the class pad-(ScreenSize-lg-xs-sm-md)-(padding integeger 0-7 {2 being a standard padding})-(axis) as you can tell this will produce classes like pad-xs-2-vert or pad-md-2 (which will cover all sides ) the padding classes use a mobile first approach. IE pad-xs-size-axis will effect all screen sizes but pad-lg-size-axis will only effect desktop and above.
padding classes
padding classes
heading3 sized as h1 call to action
This row has a flex-md-center applied to center the buttons horizontally.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Heading 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Heading 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Some h3 Text
Some Small Paragraph Text
Some Ordered List
Some List Item
Some Sub List Item
Some Other List Item
Some h6 Text
Some Unordered List
Some List Item
Some Sub List Item
Some Other List Item
Some List Item
Some Sub List Item
Some Other List Item
Sample h2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?6
Heading 4 with a 4em Spacer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?6
Text-lg
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Text-xl
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Lorem Ipsum
If the SECTION is aligned CENTER or RIGHT you will need to align each content INDIVIUALLY for now for ALIGN LEFT.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Text Alignment
Text alignment is handled by WordPress align feature. This feature can also be used to align content in a column as a group
Align Text Left
Align Text Center
Align Text Right
Align Left
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
How images are handled across multiple scenarios. The COLUMN will also determine the size of the image as well. You can only add PADDING to the column not the Image.
First two images are PNG second 2 are SVG
Image Oversized for column manually in wordpress
Image manually downsized
Image Oversized for column manually in wordpress
Image manually downsized
Png Images
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
Image set to DEFAULT
Image set to contain
Image set to cover ( Column has stretch )
Image set to icon md
Lg
MD
SM
SVG Images
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa molestiae quidem quo quod reprehenderit sint suscipit tempora?
