Get Started

Helpful Design System Colours

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

Typography

Icons

component_button();

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

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

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

Buttons

		component_button( get_field('link') );
	

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

Links

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

Space and Gaps

Basics

Boxes and Colors

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 (
    0 => 'first-class',
    1 => '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 (
    0 => 'first-class',
    1 => '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 with .l-stack-containers

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

Layouts

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.

Videos

Streaming Video

Bootstrap 5.2.3 Kitchen Sink