Style Guide.

This is my style guide.

This style guide will be a living document to showcase the designs I have incorporated into my website. It will help me keep track of things as I grow this space.

Typography.

Typography styles

H1 Lorem Ipsum

H2 Lorem Ipsum

H3 Lorem Ipsum

H4 Lorem Ipsum

H5 Lorem Ipsum
H6 Lorem Ipsum

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Bold. Lorem ipsum dolor sit amet

Italic. Lorem ipsum dolor sit amet

Code. Lorem ipsum dolor sit amet

Preformatted. Lorem ipsum dolor sit amet

Page Header.

Page header using the <PageHeader /> component.

Quote.

Quotes using the <Quote /> component. This component provides responsive quote blocks that are emphasized on larger screens.

Short quote.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Medium quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Long quote. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Multi-line quote.

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Layout.

Layouts using the <Section /> and <Container /> components.

<Section />

The <Section /> component creates a full width wrapper around body content with a max width of 1800px.

<Container />

The <Container /> component creates a responsive wrapper around body content with a max width of 1120px. This component is used within the <Section /> component.

Image Caption.

Images with caption using the <ImageCaption /> component. This component provides responsive images with optional comments. Images also have the option of being emphasized or fullwidth.

Variations

There are three variations of the <ImageCaption /> component. The default image will stay within the container. On larger screens, the emphasized image will expand beyond the width of the container. The fullwidth image will span the full width and height of the viewport. For all variations, the caption is optional.

Sample image
Default. Lorem ipsum dolor sit amet
Sample image
Emphasized. Lorem ipsum dolor sit amet
Sample image
Fullwidth. Lorem ipsum dolor sit amet

Featured Section.

Featured sections using the <FeaturedSection /> component.

Sample image

Image Background. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Color Background. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sample image

Color Background with Image. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum.

With Call To Action. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Call To Action.

Call to action using the <CallToAction /> component. This component provides a header, text, and button.

Lorem Ipsum.

With Call To Action. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hero.

Hero using the <Hero /> component. This component provides full width and full height section, displaying content in front of a provided image.

Alt text

Lorem Ipsum

Blog Posts.

Blog posts using the <BlogPosts /> component. This component provides a single column layout of blog posts in descending date order.

Link Button.

Link button using the <LinkButton /> component.