Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Typography
h1 Heading One
h1 | @include type-h1();
h2 Heading Two
h2 | @include type-h2();
h3 Heading Three
h3 | @include type-h3();
h4 Heading Four
h4 | @include type-h4();
Pragraph Plus: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero ex, faucibus et commodo vitae, malesuada id velit. Maecenas non velit semper, pellentesque risus vitae, porttitor sem.
p.type-p-plus | @include type-p-plus();
Pragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero ex, faucibus et commodo vitae, malesuada id velit. Maecenas non velit semper, pellentesque risus vitae, porttitor sem.
p | @include type-p();
Pragraph Minus: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero ex, faucibus et commodo vitae, malesuada id velit. Maecenas non velit semper, pellentesque risus vitae, porttitor sem.
p.type-p-minus | @include type-p-minus();
Colors
Buttons
Vars: btnClass, linkUrl, linkText, extraClass
+button("primary", "#", "Lorem ipsum", "btn--inline")Lorem ipsum+button("primary", "#", "Lorem ipsum", "btn--block")
Lorem ipsum+button("secondary", "#", "Lorem ipsum", "btn--inline")Lorem ipsum+button("secondary", "#", "Lorem ipsum", "btn--block")
Image
Vars: image, imageAlt, caption, span
+image("https://images.unsplash.com/photo-1532926169706-d20b3ab66ff1", "Image alt text", "true")
Hero
Vars: textPosition, bg_image, title, subtitle, description, buttonUrl, buttonText, image, imageAlt
+hero("left", "../../images/house1.jpg", "title", "subtitle", "description", "button url", "button text", "../../images/RCB-weblogo.png", "image alt")
+hero("left", "../../images/house1.jpg", "title", "subtitle", "description", "button url", "button text", "", "")
+hero("", "../../images/house1.jpg", "title", "subtitle", "description", "button url", "button text", "", "")
+hero("right", "../../images/house1.jpg", "title", "subtitle", "description", "button url", "button text", "", "")
Pod & 4 Base Peas
Pod vars: podClass, podWrap, bgColor, textColor, title, sideText
Pea vars: title, text, linkUrl, linkText
Nulla justo magna
Etiam facilisis
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
+pod("base", "", "sprout", "off-white", "Nulla justo magna", "Etiam facilisis")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
Pod & 3 Base Peas
Pod vars: podClass, podWrap, bgColor, textColor, title, sideText
Pea vars: title, text, linkUrl, linkText
Nulla justo magna
Etiam facilisis
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
+pod("base", "", "sprout", "off-white", "Nulla justo magna", "Etiam facilisis")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
Pod & 2 Base Peas
Pod vars: podClass, podWrap, bgColor, textColor, title, sideText
Pea vars: title, text, linkUrl, linkText
Nulla justo magna
Etiam facilisis
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Dolor sit amet, consectetur adipiscing elit.
+pod("base", "", "sprout", "off-white", "Nulla justo magna", "Etiam facilisis")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
+pea("Lorem ipsum", "Dolor sit amet, consectetur adipiscing elit.")
Pod & 2 Callout Peas
Pod vars: podClass, podWrap, bgColor, textColor, title, sideText
Pea vars: image, title, textParagraph1, textParagraph2
Lorem ipsum
Dolor sit amet.
Donec lobortis magna enim.
Lorem ipsum
Dolor sit amet.
Donec lobortis magna enim.
+pod("callout", "wrap")
+peaCallout("../../images/front-yard-meadow.jpg", "Lorem ipsum", "Dolor sit amet.", "Donec lobortis magna enim.")
+peaCallout("../../images/front-yard-meadow.jpg", "Lorem ipsum", "Dolor sit amet.", "Donec lobortis magna enim.")
Pod & Grid Peas
Pod vars: podClass, podWrap, bgColor, textColor, title, sideText
Pea vars: image, title, textParagraph1, textParagraph2
+pod("card-grid", "wrap")
+peaCard("", "Lorem ipsum", "#", "Dolor sit amet", "Dolor sit amet, consectetur adipiscing elit")
+peaCard("", "Lorem ipsum", "#", "Dolor sit amet", "Dolor sit amet, consectetur adipiscing elit")
+peaCard("", "Lorem ipsum", "#", "Dolor sit amet", "Dolor sit amet, consectetur adipiscing elit")
+peaCard("", "Lorem ipsum", "#", "Dolor sit amet", "Dolor sit amet, consectetur adipiscing elit")
+peaCard("", "Lorem ipsum", "#", "Dolor sit amet", "Dolor sit amet, consectetur adipiscing elit")
Contact bar
+contactBar()
Testimonial
Vars: title, text, caption, speaker
Lorem ipsum dolor sit amet
Mauris nulla libero, pellentesque eget leo eget.
Etiam facilisis lectus vehiculaDonec sed dictum
+testimonial("Lorem ipsum dolor sit amet", "Mauris nulla libero, pellentesque eget leo eget.", "Etiam facilisis lectus vehicula", "Donec sed dictum")
Sidebar
Vars: image, imageAlt
+sidebar("https://images.unsplash.com/photo-1532926169706-d20b3ab66ff1", "Image alt text")