Contents

• Headings

• Cards

• Streams

• Images

• Image Gallery

• Link Interaction

• Code

• Forms

• Tables

• Paragraphs

Headings - Heading 2

This section shows the weight of all the headings with text underneath

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus velit metus, sit amet ultricies tortor fermentum vitae. Donec nec lacus in dui tempor tincidunt.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus velit metus, sit amet ultricies tortor fermentum vitae. Donec nec lacus in dui tempor tincidunt.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus velit metus, sit amet ultricies tortor fermentum vitae. Donec nec lacus in dui tempor tincidunt.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus velit metus, sit amet ultricies tortor fermentum vitae. Donec nec lacus in dui tempor tincidunt.

Cards

Different styled cards that are used on this site

Streams

Streams is kind of like a micro blogging section of this site (think X/Twitter), this section mockups how these will be rendered.

29th December 2023

8:36am

Stream with photos

Steams can have multiple paragraphs, like below.
Streams can also contain images

Images

How images are rendered on this site

Image Gallery

A gallery control displays images in a staggered column

Link Interaction

Links must be contains within paragraph tags to have applied styling. Links contain a special hover effect that includes the background within the animation. Hover over any of the links in this paragraph to test. Links should be aligned with the surrounding text. Links used the some hover animations as cards.

Code

Since I'm a developer, displaying inline code snippers (without highlighting) is very helpful! These snippets can be used by themselves, in a list or within a paragraph like such without affecting the surrounding content.

I'm some code!

• command -useful

• command -useful2

• command -useful3

This is some longer code
that takes over a few lines
created using the 'pre' element vs a span with a class of 'code'

Forms

I don't do anything with forms on this website, but I've built out the style guide for when I do. Below is a basic form with two inputs and a submit button.

This styling is built upon pure-css.

Tables

This section shows what a table looks like on this website

This is a wide table that takes up the width of the screen

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus velit metus, sit amet ultricies tortor fermentum vitae. Donec nec lacus in dui tempor tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec malesuada urna eget molestie luctus. Sed lacinia leo diam, sed imperdiet lectus cursus malesuada. Maecenas at tristique elit, nec maximus mauris. Maecenas eget mi convallis, pretium ipsum non, convallis nunc. Sed tempus egestas orci, non egestas sem aliquet ut. Praesent in urna ut dui posuere imperdiet vel a turpis. Proin viverra eleifend nulla, non tincidunt velit sagittis sed.

Etiam porttitor, odio vel ullamcorper egestas, turpis magna imperdiet massa, quis venenatis mi justo eget odio. Pellentesque aliquet sodales metus vel ullamcorper. Aenean eu sagittis lorem. Praesent eget orci eu nunc mollis sodales. Vivamus porta risus in ultricies ultrices. Cras sollicitudin in mi ut eleifend. Curabitur condimentum dui vel pellentesque egestas. Sed pretium tincidunt lacinia. Nulla pellentesque lacinia nisi sit amet placerat. Donec tincidunt commodo lectus dignissim tempor. Nunc commodo, sem tristique feugiat rutrum, nisi dolor congue sapien, eu consectetur nulla lectus id lectus. Aliquam eget odio neque. Etiam aliquam tellus ac velit vehicula gravida.

Vivamus in purus vel massa fermentum consectetur at a diam. Donec egestas, nulla in hendrerit varius, libero libero feugiat arcu, quis faucibus est nulla at tortor. Fusce vestibulum, diam vel lacinia lacinia, odio nibh blandit quam, a consectetur odio lacus sed massa. Sed eu bibendum sem. Nam sit amet augue eget turpis viverra semper. Etiam egestas purus eget nisl varius rhoncus. Etiam egestas tortor nec lorem condimentum, non consequat elit facilisis. Quisque ullamcorper congue libero, elementum finibus nulla mollis id. Curabitur et ante vitae est venenatis dictum a eget leo. Vivamus turpis lacus, fringilla a justo et, suscipit placerat orci. Cras auctor ullamcorper aliquet. Maecenas pulvinar quis diam vel condimentum. Sed efficitur elit et vestibulum eleifend. Etiam aliquet fermentum leo, quis vehicula lectus molestie et. In eget scelerisque sapien. Nullam at interdum eros, eu tristique erat.

1. Vivamus in purus vel massa fermentum consectetur at a diam

2. Nam pellentesque iaculis velit, a molestie arcu finibus in. Nam hendrerit sem et tristique facilisis.

3. Etiam porttitor, odio vel ullamcorper egestas, turpis magna imperdiet massa, quis venenatis mi justo eget odio.

Vivamus eget mollis enim, et molestie lorem. Nam vulputate feugiat pharetra. Curabitur ac nisl at ipsum accumsan cursus. Aliquam tempor tellus sit amet justo semper, vel pulvinar nisl maximus. Sed et turpis non elit iaculis dapibus. Sed pulvinar, elit at vulputate eleifend, metus mi mollis nisi, sed tincidunt nulla justo eget urna. Vivamus consectetur cursus malesuada. Ut massa ligula, rutrum vitae nisl nec, maximus efficitur leo. Sed placerat, nulla et hendrerit maximus, massa risus vehicula ante, molestie ultricies justo dolor nec ipsum. Sed auctor tincidunt aliquet. Sed mauris leo, accumsan sed porttitor non, blandit quis est. Nam euismod, sem at laoreet varius, risus nisi dignissim sem, fermentum tristique mauris est molestie nisl. Ut feugiat quam at lacus molestie consectetur.

• Etiam porttitor, odio vel ullamcorper egestas, turpis magna imperdiet massa, quis venenatis mi justo eget odio.

• Vivamus in purus vel massa fermentum consectetur at a diam

• Nam pellentesque iaculis velit, a molestie arcu finibus in. Nam hendrerit sem et tristique facilisis.

Nam pellentesque iaculis velit, a molestie arcu finibus in. Nam hendrerit sem et tristique facilisis. In pellentesque lacus vel lorem fermentum, sit amet lobortis odio porta. Morbi tempus ante nisi, ut tristique metus dignissim vel. In sit amet ligula vel lectus pellentesque dictum. Morbi egestas nisi sed nunc pharetra, eget interdum sem consectetur. Sed mattis faucibus ante porttitor posuere. In sed bibendum tortor. Suspendisse in ex sapien. Aenean gravida eu dui sit amet dapibus. Cras ac odio quis est mollis mollis sit amet ut velit. In fermentum libero eget massa auctor, non facilisis augue auctor. Praesent quis dignissim metus.