Fremantle Indoor Beach Volleyball — Design System

🍱

Get Started

This is the design system where we can talk about the language of the website. This area is really an open canvas to test out anything that will work on the rest of the site.

Each section should be added to and expanded upon as the site evolves.


Naming - Sizes

Please use the short hand size naming convention as below:

sm, md, lg, xl, xxl

Example

.l-stack-sm


Helpful Design System Colours

Look in here!

Look at these colours you know and love from the inspector. You can use them in the design system to illustrate spacing in layouts.

This text is also inside an .l-stack

Check those out over in sass/layout/_stack.scss


Array argument validation is_arg() and get_arg()

This is great to help you pass functions between template parts.

e.g. get_template_part('template-parts/component','animals', $animals_args);

Template Part - section-zoo.php

	
	/*------------------------------------*\
		# EXAMPLE ARRAY
	\*------------------------------------*/

	$animal_args = array(
		'animals'     => array( 'dog', 'deer', 'cat' ),
		'title'       => get_field( 'title' ),
		'sub_title'   => 'Animals',
	);

	get_template_part( 'template-parts/component', 'animals', $animals_args );
	

Template Part - component-animals.php

	
	/*------------------------------------*\
		# EXAMPLE OUTPUT
	\*------------------------------------*/

	$is_title     = is_arg( 'title', $args ); // This will return false because get_field('title') doesn't exist.
	$is_nothing   = is_arg( 'something', $args ); // This will return false.
	$is_animals   = is_arg( 'animals', $args ); // This will return truthy as an array.

	$sub_title    = get_arg( 'sub_title', $args ); // This will return 'Animals'.

	$animals      = get_arg( 'animals', $args );

	if( $animals && is_array( $animals ) ) {
		foreach( $animals as $animal ) {
			echo $animal;
		}
	}
	

Attribute output from associative array get_attributes()

This is used in component_button() to add more attributes that don't have specific arguments.

	
	$attributes = array(
		'data-url'  => 'http://lateralaspect.com.au',
		'data-id'   => 'latasp',
	);

	get_attributes( $attributes );

	// Returns: data-url="http://lateralaspect.com.au" data-id="latasp"
	

Colors

Usage

  • Apply in HTML using a class name .color-white .bg-white
  • or in SCSS using the color__ fuction color: color__(white);
  • or in CSS with a CSS Variable color: var(--color-white);

Typography

Display Styles

.f-display-1

Display 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

Display 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

Display 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-1 .color-primary .bg-black

Display 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-2

Display 2

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-3

Display 3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-4

Display 4

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-5

Display 5

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-6

Display 6

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-6

Display 7

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

.f-display-6

Display 8

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi velit eum nemo illum accusamus.

Body Styles

.f-body-large

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-1

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-3

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

.f-body-4

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est eopksio laborum sed ut perspiciatis unde omnis istpoe natus error sit voluptatem accusantium.

Icons

Usage

Component Inline Icon with Classes and Accessibility Tags

Used in conjuction with:

component_button();

				
				// Source: "assets/img/inline-icon-external-link.svg.php".
				component_icon( 'external-link', 'icon--currentColor color-primary' );
				
			

Raw SVG from SVG File

				
				// Source: "assets/img/icons/icon-external-link.svg".
				render_svg( 'icon-external-link' );
				
			

Raw SVG from Template File

				
				// Source: "assets/img/inline-icon-external-link.svg.php".
				get_template_part( 'assets/img/inline', 'icon-external-link.svg' );
				
			

Buttons

Button Button Button Button

This button is a button element instead of an a. It has no href, rel, or target.

This button is a div element instead of an a. It has no href, rel, or target.

Button
Button 2

You can dump an ACF link field straight into the first argument if you wish to output a button easily.

		component_button( get_field('link') );
	

This would be the equivelant of doing:

		
		component_button(
			array(
				'title'   => 'Button',
				'url'     => 'https://google.com',
				'target'  => '_blank',
			)
		);
		
	

Links

You can dump an ACF link field straight into the first argument if you wish to output a link easily.

		component_link( get_field( 'link' ), 'c-link-1' );
	

Space and Gaps

Spacers

Spacers are fixed and should be used for layouts: external spacing and gutters.

See Bootstrap 5.2 Spacing

See $spacers in _layout-settings.scss

Gaps

Gaps are relative to font-size and are used with .l-stack

See $gaps in _layout-settings.scss

Logo

Basics

Boxes and Colors

Colors further down the chain take precedence otherwise they will inherit the parent color.

Boxes have padding on all sides and usually have different padding at different screen sizes. Inline Bootstrap style equivalent would be
class="p-16 p-lg-32 p-xl-64"
or whatever combination you might need.

Below are two example boxes but customise everything to suit the design you are working on in layout/_box.scss

.box-1 .l-stack .color-[color] .bg-[color]

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

.box-2 .l-stack .color-[color] .bg-[color]

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

Images

Image that loads no fallback and revealing the .bg-loading.

You'll need to add an image and update the ID to see this working properly.


<?php $image_args = array (
  
'id' => '26',
  
'size' => 'medium',
  
'classes' => 
  array (
    
=> 'first-class',
    
=> 'second-class',
  ),
); 
?>

Image that fails to load no fallback and revealing the .bg-loading.

You'll need to add an image and update the ID to see this working properly.


<?php $image_args = array (
  
'id' => '0000',
  
'size' => 'medium',
  
'classes' => 
  array (
    
=> 'first-class',
    
=> 'second-class',
  ),
); 
?>

Image that doesn't exist with fallback .c-no-image.


<?php $image_args = array (
  
'id' => '0000',
  
'size' => 'medium',
  
'fallback' => true,
  
'fallback_type' => 'event',
); 
?>

Containers

Containers use a max width. The wrapper around it is what will create the outside gutter; this helps to isolate max width and the gutter to avoid doing math.

Set the default max width using $container-max-widths in sass/variables-settings/_layout-settings.scss

Containers with .l-stack-containers

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cupiditate voluptatum impedit mollitia, voluptas ipsa labore consequatur facilis. Id aspernatur cupiditate perspiciatis, laborum maxime labore cum mollitia quas deleniti. Ipsam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cupiditate voluptatum impedit mollitia, voluptas ipsa labore consequatur facilis. Id aspernatur cupiditate perspiciatis, laborum maxime labore cum mollitia quas deleniti. Ipsam.

Containers with Layouts and .bg-color and .l-stack-containers

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cupiditate voluptatum impedit mollitia, voluptas ipsa labore consequatur facilis. Id aspernatur cupiditate perspiciatis, laborum maxime labore cum mollitia quas deleniti. Ipsam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cupiditate voluptatum impedit mollitia, voluptas ipsa labore consequatur facilis. Id aspernatur cupiditate perspiciatis, laborum maxime labore cum mollitia quas deleniti. Ipsam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum cupiditate voluptatum impedit mollitia, voluptas ipsa labore consequatur facilis. Id aspernatur cupiditate perspiciatis, laborum maxime labore cum mollitia quas deleniti. Ipsam.
100% wide until extra extra large breakpoint - .max-w-640

Layouts

Layouts are more than likely going to sit inside a .container.

These would ideally be written in CSS so that they can be tweaked easily but they can also be built using Bootstrap which is baked in.

Cluster

The Cluster explained on Every Layout.

Split

Generally these stack on mobile but you could make a variation if you'd like.

This currently doesn't work with the Boostrap .gap- utility.

.l-split-1:1
.l-split-2:3 gap variations
.l-split-2:3 gap variations example content

Lorem Ipsum Dolar Sit Emit

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio dui.

Sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Donec sed odio.

Tags

Teams playing tonight

Bento

Today's Fixtures

See Fixtures

Need Players? Join the Facebook Fill-In Group

Go to Facebook

Blockquote

Celebrate a victory or drown a loss with a cold one, as Freo Indoor have a license to chill (and serve alcohol).

It’s like extending your summer vacation, forever. Here’s our dress standard: shoes are not required.

It’s like extending your summer vacation, forever. Here’s our dress standard: shoes are not required.

Hello There

Hello There

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla.

Cards

Social Nights

Finals Coming Up

Bring some friends or meet new people and tuck in on some free pizza on our Friday and Saturday social nights. 6:30pm til late. $15 per person.

Social Nights

Full Linked Card

Bring some friends or meet new people and tuck in on some free pizza on our Friday and Saturday social nights. 6:30pm til late. $15 per person.

Social Nights

Full Link - Orange

Bring some friends or meet new people and tuck in on some free pizza on our Friday and Saturday social nights. 6:30pm til late. $15 per person.

Social Nights

Finals Coming Up - Dark, Centered

Bring some friends or meet new people and tuck in on some free pizza on our Friday and Saturday social nights. 6:30pm til late. $15 per person.

Social Nights

Finals Coming Up - Light, Centered

Bring some friends or meet new people and tuck in on some free pizza on our Friday and Saturday social nights. 6:30pm til late. $15 per person.

It's back baby

Glow in the Dark Night

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore et dolore magna aliqua enim ad minim veniam, quis nostrud exercitation ullamco.

\

Message

“TBA” or “TO be advised”?

“TBA” or “To be advised” means that your team did not have an opponent on the day the fixtures were generated. This does NOT mean that you will not have an opponent on the night. We frequently have new teams joining that may be rostered to play against you. Other teams forfeiting may also mean that you end up with an opponent and if you do not have an opponent we will contact players and attempt to field a team for you to verse. 24 hours notice is still required if you wish to forfeit your team. Less than 24 hours notice will still incur a forfeit fee.

Fixture Updates

Fixtures for the coming week are posted the day after you play. So if you play Monday, your fixtures for the next week will be online by midnight Tuesday

Ribbon

Team of the Week

Men's 2023

    Player 1

    Player 2

    Player 3

    Player 4

    Player 5

    Player 6

Division 1 1
Second Place

Women's 2024

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, ex nesciunt dignissimos mollitia error dolorum rerum laudantium repudiandae ea cumque consequatur.

Division 1 2
Third Place

Women's 2024

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, ex nesciunt dignissimos mollitia error dolorum rerum laudantium repudiandae ea cumque consequatur.

Division 1 3
Fourth Place

Women's 2024

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, ex nesciunt dignissimos mollitia error dolorum rerum laudantium repudiandae ea cumque consequatur.

Division 1 4

Link List

List

  • Women - Two divisions (8 players per team)

  • Men - Two divisions (8 players per team)

  • Mixed - Two divisions (8 players per team)

  • Junior - Two divisions (8 players per team)

List Description

Socialising

While you can socialise with people on the beach while you play volleyball, indoor centres have social events to promote meeting and befriending people, making it a great place to go and watch or play volleyball, especially for those who find it hard to meet new people.

Special Events

Indoor sports centres often host special events, making it about more than just playing volleyball. Special event evenings allow those who don’t play the sport to participate in fun activities and enjoy themselves.

Competitive

Jump right in and start your own team!

Safety First

Get a little more serious and Join our Facebook fill in group

Call To Action

Friday Night Socials

Every Friday night there’s social volleyball at the centre. No commitments, everyone’s friendly, and you can get a taste of what indoor beach volleyball is all about.

Friday Night Socials

Every Friday night there’s social volleyball at the centre. No commitments, everyone’s friendly, and you can get a taste of what indoor beach volleyball is all about.

Check out our virtual tour

Every Friday night there’s social volleyball at the centre. No commitments, everyone’s friendly, and you can get a taste of what indoor beach volleyball is all about.

Check out our virtual tour

Friday 7:30pm

Check out our virtual tour

Friday 7:30pm

Check out our virtual tour

Friday 7:30pm

Glow in the Dark Night

20 Nov 23

Need to forfeit or take a break?

Every Friday night there’s social volleyball at the centre. No commitments, everyone’s friendly, and you can get a taste of what indoor beach volleyball is all about.

CTA Complex

Ready to join in the fun?

Wether you’re wanting to dip your toe in the sand or jump straight in, there’s multiple ways you can start playing:

Accordion

What is the Fremantle Indoor Design System?

The Fremantle Indoor Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. It is a living, breathing document that will evolve as our brand and products do. It is the single source of truth for how we design and build digital products.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem ad earum deserunt, nisi at rerum architecto asperiores optio iure fuga, consequatur sapiente consectetur, laborum dicta. Cupiditate accusamus alias earum est.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.

What is the Fremantle Indoor Design System?

What is the Fremantle Indoor Design System?

Promo

Promo Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut ero labore.

Get in touch

Word Scroller

Teams Playing Tonight

New York Knicks Los Angeles Lakers Chicago Bulls Golden State Warriors Brooklyn Nets Los Angeles Clippers Philadelphia 76ers Phoenix Suns Milwaukee Bucks Utah Jazz Atlanta Hawks Miami Heat Portland Trail Blazers Denver Nuggets Dallas Mavericks Washington Wizards Indiana Pacers Charlotte Hornets New Orleans Pelicans Sacramento Kings Orlando Magic Minnesota Timberwolves Detroit Pistons San Antonio Spurs Memphis Grizzlies Cleveland Cavaliers Oklahoma City Thunder Houston Rockets Toronto Raptors Boston Celtics

Feed

Fixtures

Atreides 7:50pm Court 1 Smashtastic
BMOB 6:00pm Court 7 Serves Up
Ballarinas 7:50pm Court 6 Volleybois
Champion 6:55pm Court 8 The Strugglers
Dirty Sets 6:55pm Court 1 Spikological Warfare
Dislocation Nation 6:55pm Court 5 Eugenesnewjeans
Empire Spikes Back 7:50pm Court 7 Sets On the Beach
Eugenesnewjeans 6:55pm Court 5 Dislocation Nation
FTTS 6:00pm Court 6 Win or Booze
Grandpa's Eyebrows 6:00pm Court 2 Set Me Up
Here For The Beers 8:45pm Court 1 Volley Ballers
Hit For Brains 7:50pm Court 3 Uncle Terry's Happy Pants
Hooray Henry 8:45pm Court 3 Lights Camera Action
Hot Diggity 6:00pm Court 5 Scared Hitless
Keepy Uppy 7:50pm Court 5 To be advised*
KimBeeLee 6:00pm Court 1 Nice Dog Bro
Lamingtons 6:55pm Court 7 The Greatest Northerners
Lights Camera Action 8:45pm Court 3 Hooray Henry
McBallface 6:55pm Court 3 To be advised*
Nando's After? 6:55pm Court 2 The Volley's
New Kids On The Block 7:50pm Court 2 Valley Old Boys
Nice Dog Bro 6:00pm Court 1 KimBeeLee
Notorious Digs 6:55pm Court 6 Spike Wazowskiii
On Probation 6:00pm Court 8 Spike Kids
SL Boys 6:55pm Court 4 Taco Tuesday
Sandroids 7:50pm Court 4 Set For Life
Sandy Pants 7:50pm Court 8 Smash or Pass
Scared Hitless 6:00pm Court 5 Hot Diggity
Serves Up 6:00pm Court 7 BMOB
Set For Life 7:50pm Court 4 Sandroids
Set Me Up 6:00pm Court 2 Grandpa's Eyebrows
Sets On the Beach 7:50pm Court 7 Empire Spikes Back
Sets Pistols 8:45pm Court 2 The Gold Diggers
Sloppy Sets 6:00pm Court 4 Surprise!
Smash or Pass 7:50pm Court 8 Sandy Pants
Smashtastic 7:50pm Court 1 Atreides
Spike Kids 6:00pm Court 8 On Probation
Spike Wazowskiii 6:55pm Court 6 Notorious Digs
Spikological Warfare 6:55pm Court 1 Dirty Sets
Surprise! 6:00pm Court 4 Sloppy Sets
Taco Tuesday 6:55pm Court 4 SL Boys
The Gold Diggers 8:45pm Court 2 Sets Pistols
The Greatest Northerners 6:55pm Court 7 Lamingtons
The Strugglers 6:55pm Court 8 Champion
The Volley's 6:55pm Court 2 Nando's After?
To be advised* 7:50pm Court 5 Keepy Uppy
To be advised* 6:55pm Court 3 McBallface
Tom Hanks 6:00pm Court 3 Wilsooon!
Uncle Terry's Happy Pants 7:50pm Court 3 Hit For Brains
Valley Old Boys 7:50pm Court 2 New Kids On The Block
Volley Ballers 8:45pm Court 1 Here For The Beers
Volleybois 7:50pm Court 6 Ballarinas
Wilsooon! 6:00pm Court 3 Tom Hanks
Win or Booze 6:00pm Court 6 FTTS
Aeroplane Jelly 6:00pm Court 5 Derelick My Volley Balls
Ball Fondlers 6:00pm Court 7 Rough sets
Beach Please 6:55pm Court 6 Hot Shots
Blokes & Their Balls 6:00pm Court 6 Bolleyvall
Bolleyvall 6:00pm Court 6 Blokes & Their Balls
Chewblocka 7:50pm Court 2 Move Your Feet
Circus of Chaos 6:00pm Court 2 Wild Warriors
Derelick My Volley Balls 6:00pm Court 5 Aeroplane Jelly
Dig It 7:50pm Court 5 Sunbeams
Get Spiked 6:55pm Court 4 Sandy Clam Eaters
Gym Class Heroes 6:00pm Court 4 Ordered Chaos
HSP 6:00pm Court 3 [Redacted]
Hot Shots 6:55pm Court 6 Beach Please
In Sam We Trust 6:55pm Court 1 Together Ape Strong
Jack Reacher 6:55pm Court 7 The Nicole Kidman Fan Club
Lucken Fasies 6:00pm Court 1 Roaring 20's
Lucky Goldstars 7:50pm Court 3 Where's Simon??
Matchblocks Twenty 7:50pm Court 1 Paris 2024
Move Your Feet 7:50pm Court 2 Chewblocka
One Hit Wonders 7:50pm Court 6 Renegades
Ordered Chaos 6:00pm Court 4 Gym Class Heroes
Paris 2024 7:50pm Court 1 Matchblocks Twenty
Practice Safe Sets 6:55pm Court 5 Sandy Bums
Renegades 7:50pm Court 6 One Hit Wonders
Roaring 20's 6:00pm Court 1 Lucken Fasies
Rough sets 6:00pm Court 7 Ball Fondlers
Sand Worms 7:50pm Court 7 To Be Advised*
Sandgropers 7:50pm Court 4 Sets From Behind
Sandy Bums 6:55pm Court 5 Practice Safe Sets
Sandy Clam Eaters 6:55pm Court 4 Get Spiked
Sets From Behind 7:50pm Court 4 Sandgropers
Sugma Dig 6:55pm Court 3 Volleywood Boulevard
Summer Skeetas 6:55pm Court 2 Volleybrawlers
Sunbeams 7:50pm Court 5 Dig It
The Nicole Kidman Fan Club 6:55pm Court 7 Jack Reacher
To Be Advised* 7:50pm Court 7 Sand Worms
Together Ape Strong 6:55pm Court 1 In Sam We Trust
Volleybrawlers 6:55pm Court 2 Summer Skeetas
Volleywood Boulevard 6:55pm Court 3 Sugma Dig
Where's Simon?? 7:50pm Court 3 Lucky Goldstars
Wild Warriors 6:00pm Court 2 Circus of Chaos
[Redacted] 6:00pm Court 3 HSP

Videos

Streaming Video

Bootstrap 5.2.3 Kitchen Sink

If this looks absolutely butchered GOOD! Not all modules are on and not all should be. Check the items that you're using and ignore the rest.

Contents

Typography

Documentation

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.


A well-known quote, contained in a blockquote element.

Someone famous in Source Title
  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
  • This is a list item.
  • And another one.
  • But they're displayed inline.

Images

Documentation
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

Tables

Documentation
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Figures

Documentation
Placeholder 400x300
A caption for the above image.

Forms

Overview

Documentation
We'll never share your email with anyone else.
Radios buttons

Disabled forms

Documentation
Disabled radios buttons

Sizing

Documentation

Input group

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Components

Accordion

Documentation

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Alerts

Documentation

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Buttons

Documentation
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Popovers

Documentation

Scrollspy

Documentation

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Third heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fourth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Fifth heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Spinners

Documentation
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Toasts

Documentation

Tooltips

Documentation