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 6:55pm Court 1 Smashtastic
BMOB 6:00pm Court 6 Here For The Beers
Ball Busters 6:55pm Court 8 Ballarinas
Ballarinas 6:55pm Court 8 Ball Busters
Beef Wellington 6:55pm Court 3 Sloppy Sets
Block Tuah 8:45pm Court 3 Jack Digniels
Block Tuah 7:50pm Court 3 New Kids On The Block
Consensual Sets 8:45pm Court 2 Lamingtons
DTM 7:50pm Court 7 Uncle Terry's Happy Pants
Dirty Sets 6:55pm Court 2 Spikological Warfare
Dislocation Nation 6:55pm Court 4 Eugenesnewjeans
Eugenesnewjeans 6:55pm Court 4 Dislocation Nation
FTTS 7:50pm Court 1 Set Me Up
Grandpa's Eyebrows 6:00pm Court 3 Scared Hitless
Here For The Beers 6:00pm Court 6 BMOB
Hit For Brains 6:00pm Court 7 The Gold Diggers
Hooray Henry 6:00pm Court 8 Spike That Ass
Jack Digniels 8:45pm Court 3 Block Tuah
Keepy Uppy 7:50pm Court 2 Set For Life
KimBeeLee 7:50pm Court 6 Spike Wazowskiii
Lamingtons 8:45pm Court 2 Consensual Sets
Lights Camera Action 6:55pm Court 6 Sets Pistols
Nando's After? 7:50pm Court 4 Sandroids
New Kids On The Block 7:50pm Court 3 Block Tuah
Nice Dog Bro 6:00pm Court 1 Surprise!
Sandroids 7:50pm Court 4 Nando's After?
Sandy Pants 6:00pm Court 4 Tom Hanks
Scared Hitless 6:00pm Court 3 Grandpa's Eyebrows
Serves Up 6:00pm Court 2 Spike Kids
Set For Life 7:50pm Court 2 Keepy Uppy
Set Me Up 7:50pm Court 1 FTTS
Sets On the Beach 7:50pm Court 8 The Boorloo Ballers
Sets Pistols 6:55pm Court 6 Lights Camera Action
Sloppy Sets 6:55pm Court 3 Beef Wellington
Smashtastic 6:55pm Court 1 Atreides
Spike Kids 6:00pm Court 2 Serves Up
Spike That Ass 6:00pm Court 8 Hooray Henry
Spike Wazowskiii 7:50pm Court 6 KimBeeLee
Spikological Warfare 6:55pm Court 2 Dirty Sets
Surprise! 6:00pm Court 1 Nice Dog Bro
Taco Tuesday 6:00pm Court 5 Volley Ballers
The Boorloo Ballers 7:50pm Court 8 Sets On the Beach
The Gold Diggers 6:00pm Court 7 Hit For Brains
The Greatest Northerners 6:55pm Court 7 Volleybois
The Leftover 6:55pm Court 5 The Velociraptor Volleyball Team
The Strugglers 7:50pm Court 5 Valley Old Boys
The Velociraptor Volleyball Team 6:55pm Court 5 The Leftover
Tom Hanks 6:00pm Court 4 Sandy Pants
Uncle Terry's Happy Pants 7:50pm Court 7 DTM
Valley Old Boys 7:50pm Court 5 The Strugglers
Volley Ballers 6:00pm Court 5 Taco Tuesday
Volleybois 6:55pm Court 7 The Greatest Northerners
3 And A Half Men 7:50pm Court 1 Spike Tyson
Aeroplane Jelly 7:50pm Court 7 Practice Safe Sets
Ball Fondlers 6:55pm Court 7 BiptyBombs
Beach Please 6:00pm Court 2 Jonesy & The Boys
BiptyBombs 6:55pm Court 7 Ball Fondlers
Block Party 7:50pm Court 5 One Hit Wonders
Blokes & Their Balls 6:00pm Court 6 Googala Hasen
Chewblocka 6:55pm Court 5 Get Spiked
Circus of Chaos 6:00pm Court 5 The Empire Spikes Back
Dig It 6:55pm Court 8 Ordered Chaos
Diggy Pop 7:50pm Court 6 Sandy Bums
Freaky Sets 7:50pm Court 4 Sunbeams
Gabe's Team 7:50pm Court 8 Where's Simon??
Geeet It 6:00pm Court 4 Rusty Clams
Get Spiked 6:55pm Court 5 Chewblocka
Googala Hasen 6:00pm Court 6 Blokes & Their Balls
Gym Class Heroes 6:00pm Court 7 Sand Eaters
Hamstar 6:00pm Court 3 Spike Me Harder
In Sam We Trust 7:50pm Court 3 [Redacted]
Jesse's Mandurah Trip 6:55pm Court 1 Together Ape Strong
Jonesy & The Boys 6:00pm Court 2 Beach Please
Kiss My Ace 7:50pm Court 2 Sandgropers
Lucken Fasies 6:00pm Court 1 Rough sets
Matchblocks Twenty 6:55pm Court 2 To be advised*
Net Zero 6:55pm Court 4 Summer Skeetas
One Hit Wonders 7:50pm Court 5 Block Party
Oral Sets 6:55pm Court 3 Sugma Dig
Ordered Chaos 6:55pm Court 8 Dig It
Practice Safe Sets 7:50pm Court 7 Aeroplane Jelly
Rough sets 6:00pm Court 1 Lucken Fasies
Rusty Clams 6:00pm Court 4 Geeet It
Sand Eaters 6:00pm Court 7 Gym Class Heroes
Sandgropers 7:50pm Court 2 Kiss My Ace
Sandy Bums 7:50pm Court 6 Diggy Pop
Sandy Cheeks 6:00pm Court 8 Volleybrawlers
Sandy Clam Eaters 6:55pm Court 6 Sets From Behind
Sets From Behind 6:55pm Court 6 Sandy Clam Eaters
Spike Me Harder 6:00pm Court 3 Hamstar
Spike Tyson 7:50pm Court 1 3 And A Half Men
Sugma Dig 6:55pm Court 3 Oral Sets
Summer Skeetas 6:55pm Court 4 Net Zero
Sunbeams 7:50pm Court 4 Freaky Sets
The Empire Spikes Back 6:00pm Court 5 Circus of Chaos
To be advised* 6:55pm Court 2 Matchblocks Twenty
Together Ape Strong 6:55pm Court 1 Jesse's Mandurah Trip
Volleybrawlers 6:00pm Court 8 Sandy Cheeks
Where's Simon?? 7:50pm Court 8 Gabe's Team
[Redacted] 7:50pm Court 3 In Sam We Trust

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