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’s row 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.
padding classes are now Size and Screen Resolution dependant the following format is used to declare the class pad-(ScreenSize-lg-xs-sm-md)-(axis NOT REQ)-(padding integeger 0-7 {2 being a standard padding}) as you can tell this will produce classes like pad-xs-vert-7 or pad-md-2 (which will cover all sides ) the padding classes use a mobile first approach. IE pad-xs-axis-size will effect all screen sizes but pad-lg-size-axis will only effect desktop and above.
padding classes
padding classes are now Size and Screen Resolution dependant the following format is used to declare the class pad-(ScreenSize-lg-xs-sm-md)-(axis NOT REQ)-(padding integeger 0-7 {2 being a standard padding}) as you can tell this will produce classes like pad-xs-vert-7 or pad-md-2 (which will cover all sides ) the padding classes use a mobile first approach. IE pad-xs-axis-size will effect all screen sizes but pad-lg-size-axis will only effect desktop and above.
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?
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?
Basic Element Testing Area
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Antidisestablishmentarianism
Sample h3
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 item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
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
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?
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?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex End
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex Center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Baseline
Item
Item
Flex Stretch
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex Space Between
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex Space Around
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex Space Evenly
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aspernatur, atque consequuntur delectus deleniti doloribus eius esse et facere id ipsa
Flex Alignments Secondary Axis Row
Justified Flex Start
Justified Flex Center
Justified Flex End
Image Testing Area
Image Default
Image Contain
Image Cover
Icon Large
Icon Medium
Icon Small
Ratio Block
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?
Hello!
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
Some List Item
Some Sub List Item
Some Other List Item
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?
Some Ordered List item that is super long and wraps onto multiple lines. Isn’t it fantastic we can support super long list items.
