Frisbee Fodder

Styleguide

Text styles

Heading one

Heading two

Heading three

Body text example

Colours

Speech bubble position and styles

Image panels are designed with space for text, with classes based on .quarter, .third, .half, .full width and so on. Speech bubbles/text are overlaid onto the images.

Accessibility

The narrative is accessible to site readers and the context of the speaker is readable since the b contains the speaker's name. It's not visually presented but exists in the markup;

For example:

Prints out as "Hey what's happening" and is positioned in the comic panel but reads as
"Ulf: Hey what is happening!?"

Button styles


Start from the beginning…
example image SpeakerTop left full width speech SpeakerBottom right full width
example image SpeakerTop right full width speech SpeakerBottom left full width
example image SpeakerQuarter width text SpeakerQuarter left full width

Animation styles

Knock