Icon with Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet
Title is left aligned
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Title is centered
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Title and text are centered
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
All copy is left aligned
(icon-with-text pseudo-mod)
Bacon ipsum dolor amet pork belly chuck filet mignon leberkas meatloaf burgdoggen beef ground round doner. Turkey ball tip sausage, beef pancetta drumstick pork cow swine picanha pastrami shank boudin pork loin capicola. Hamburger spare ribs shankle meatball ham hock tail ball tip. Meatloaf chicken kielbasa, picanha biltong capicola shoulder pancetta spare ribs boudin short loin flank pork.
All copy is left aligned
(icon-with-text pseudo-mod)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. That is all.
All copy is left aligned
(icon-with-text pseudo-mod)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
They work in mod-row too
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
They work in mod-row too
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Fixed Background Color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Variable Background Color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Index Variable Background Color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Life Background Color
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Description
This pattern will include an icon, H3, and paragraph text. This pattern should not be used alone but in a row containing 2-3 elements like it. The H3 communicates the high-level take away from the benefit statement below and should not exceed 46 characters. The paragraph below should not exceed 240 characters.
Functionality
This component does not offer interaction. Nothing is clickable. In a mobile environment, these patterns would stack.
Options
Icon is always centered above text. Use the background-color class modifier eg: variable-color-bg:
H3 and paragraph have alignment options:
- Title and paragraph are left aligned
- Title is centered and paragraph is left aligned
- Title and paragraph are centered
Author UI
Mike
