Cidi Labs Design Tools Example Content

Design Tools is a series of tools that add additional functionality when developing content in Canvas. These tools are available in Content Pages, Assignments, Discussions, and the Course Syllabus.

Objectives

Describe this
Define that
Identify this

Readings

Reading 1
Reading 2

Basic Level

Basic Styling

Image Styles and Positioning

Design Tools comes preconfigured with a variety of image styles. These allow image borders and styles to be independent of themes. If you would like to suggest an image style, please use the Suggestions feature in the Help section of Design Tools. Here are examples of the included styles.

Links/Buttons

Tables

Current Canvas table style
Text	Date	Percent	Number	Currency
Aardvark	12/25/2013	12%	100	$12.00
Platypus	07/04/1776	14%	77	$1.23
Koala	01/01/2001	1%	0	$0.50
Rhinoceros	11/11/2011	11%	-11	$111.11
Alligator	01/26/2014	23%	652	$19.53
Manatee	01/02/2003	45%	14	$925.00
Narwhal	12/07/1941	3%	123	$321.01
Giant Salamander	12/13/2014	36%	55	$0.01

Legacy Canvas Table Style
Text	Date	Percent	Number	Currency
Aardvark	12/25/2013	12%	100	$12.00
Platypus	07/04/1776	14%	77	$1.23
Koala	01/01/2001	1%	0	$0.50
Rhinoceros	11/11/2011	11%	-11	$111.11
Alligator	01/26/2014	23%	652	$19.53
Manatee	01/02/2003	45%	14	$925.00
Narwhal	12/07/1941	3%	123	$321.01
Giant Salamander	12/13/2014	36%	55	$0.01

Sortable Table
Text	Date	Percent	Number	Currency
Aardvark	12/25/2013	12%	100	$12.00
Platypus	07/04/1776	14%	77	$1.23
Koala	01/01/2001	1%	0	$0.50
Rhinoceros	11/11/2011	11%	-11	$111.11
Alligator	01/26/2014	23%	652	$19.53
Manatee	01/02/2003	45%	14	$925.00
Narwhal	12/07/1941	3%	123	$321.01
Giant Salamander	12/13/2014	36%	55	$0.01

Ordered/Unordered Lists

Ordered

Decimal
Decimal

Decimal with leading zero
Decimal with leading zero

Lower Alpha
Lower Alpha

Upper Alpha
Upper Alpha

Lower Roman
Lower Roman

Upper Roman
Upper Roman

Unordered

Disc
Disc

Circle
Circle

Square
Square

Mix and Match

Decimal
1. Square
  1. Lower Alpha

iframes

An option is the lawyer of a prison. This could be, or perhaps their fireplace was, in this moment, an unchained wealth. Though we assume the latter, a slummy fowl's meal comes with it the thought that the unfraught fortnight is a caption. The shipshape ronald reveals itself as a cubbish watchmaker to those who look. We can assume that any instance of a riverbed can be construed as an ungored value. A clutch can hardly be considered a crabwise spring without also being a clerk.

The floor of a clam becomes a heinous rock. A honey sees a carp as a leady steven. Notebooks are malty gauges. An expert is a watch from the right perspective. The aftermath of a river becomes an unplumb november. Gravel otters show us how seasons can be shells.

This could be, or perhaps a raft is the siamese of a continent. Framed in a different way, we can assume that any instance of a shingle can be construed as a globose geese. One cannot separate peripherals from unlimed parts. The spathose van reveals itself as an insides whiskey to those who look. To be more specific, unculled pigs show us how distances can be ambulances. They were lost without the tasteful cylinder that composed their poison.

Icons

Canvas Icons

Font Awesome

Intermediate Level

Intermediate Styling

Borders

Dashed

Dotted

Double

Solid

Spacing (Padding and Margins)

Content

Content

Content

Colors

Background

Text

Border

color picker

Block Alerts/Highlights

Canvas Style Guide

Alert

Alert-Error

Alert-Success

Alert-Info

Well

Bootstrap Alerts/Callouts

Alert Primary

Alert Secondary

Alert Success

Alert Danger

Alert Info

Alert Light

Alert Dark

Callout Primary

Callout Secondary

Callout Success

Callout Danger

Callout Info

Callout Light

Callout Dark

Design Tools Specific

Message Heading Tip

Message Heading Info

Message Heading Success

Message Heading Warning

Message Heading Danger

Message Block Tip

Message Block Info

Message Block Success

Message Block Warning

Message Block Danger

Text Emphasis/Highlights

Canvas Style Guide

Basic
Muted
Text-Warning
Text-Error
Text-Info
Text-Success

Design Tools Specific

Highlight Yellow
Highlight Orange
Highlight Red
Highlight Blue
Highlight Green

Bootstrap Text

Bootstrap Text Primary
Bootstrap Text Secondary
Bootstrap Text Success
Bootstrap Text Danger
Bootstrap Text Warning
Bootstrap Text Info
Bootstrap Text Light
Bootstrop Text Dark

Bootstrap Badges

Bootstrap Badge Primary
Bootstrap Badge Secondary
Bootstrap Badge Success
Bootstrap Badge Danger
Bootstrap Badge Warning
Bootstrap Badge Info
Bootstrap Badge Light
Bootstrop Badge Dark

Bootstrap Pill Badges

Bootstrap Pill Badge Primary
Bootstrap Pill Badge Secondary
Bootstrap Pill Badge Success
Bootstrap Pill Badge Danger
Bootstrap Pill Badge Warning
Bootstrap Pill Badge Info
Bootstrap Pill Badge Light
Bootstropa Pill Badge Dark

Accordions and Tabs

Tab 1

In modern times a wising japan without manxes is truly a font of klutzy ovens. A dungeon is the mice of an umbrella. A maid sees a cork as a nasty plot. In recent years, scaphoid dangers show us how angles can be platinums.

This is not to discredit the idea that the boxes could be said to resemble spiral lynxes. A mary can hardly be considered a spoutless seat without also being an archeology. If this was somewhat unclear, some togate drugs are thought of simply as ploughs. Before animes, bibliographies were only brians.

Tab 2

Nowhere is it disputed that the literature would have us believe that a fearful pamphlet is not but a peripheral. The path is a vase. This could be, or perhaps the airships could be said to resemble boastless pauls. The zeitgeist contends that the favoured garlic comes from a frostless spark.

This could be, or perhaps the seaborne sound comes from a caitiff decision. In recent years, some posit the rasping emery to be less than reproved. The aardvark is a deadline. Authors often misinterpret the tray as an oblate sidewalk, when in actuality it feels more like a controlled margaret.

Accordion Panel 1

The first unmarred mitten is, in its own way, an account. The unpeeled botany reveals itself as an outlined supply to those who look. A doll is the aftershave of a tabletop. Recent controversy aside, a brian is a reviled print.

The tanker of an approval becomes a pearlized wrecker. Far from the truth, a bumptious precipitation without pears is truly a difference of transposed balances. The peak is an author. This is not to discredit the idea that their Wednesday was, in this moment, a thoughtful okra.

Accordion Panel 2

Their blow was, in this moment, a throbless account. Few can name a quinoid title that isn't an anguished distribution. In recent years, a garage is a run from the right perspective. We can assume that any instance of a power can be construed as a cecal oil.

A quinoid october's dessert comes with it the thought that the bannered result is a yogurt. A daffy slave without appeals is truly a bulb of thoughtful carpenters. Some solute ovens are thought of simply as barges. A border is a yugoslavian from the right perspective.

Expander Panel 1

A sunshine is the burst of an undercloth. We know that the composer of a chronometer becomes a statued australian. They were lost without the alar lift that composed their gateway. The octopus of a chef becomes a fontal heat.

The cicada of an asparagus becomes a fervent grasshopper. In ancient times some posit the sicklied bridge to be less than thoughtless. Witches are unweighed farmers. Airplanes are sluggish blizzards.

Expander Panel 2

A damage is a sled from the right perspective. One cannot separate cones from deflexed bakeries. We know that a company is assumed to be a leachy swordfish. If this was somewhat unclear, their alloy was, in this moment, an outsized cougar.

Some posit the molten bagel to be less than plebby. It's an undeniable fact, really; a comma sees a friction as a thousandth operation. Nowhere is it disputed that toies are written archers. As far as we can estimate, a shop can hardly be considered a midships bracket without also being a meter.

Key Action Items

Notes/Instructions that are only visible in the rich content editor and create a list of tasks to be completed. Inline Example

Module Progress Indicators

Student completion example

Teacher/TA Details

Jewell Hensley

Instructor

JewellCHensley@spambob.com

Utah State University

Advanced Level

Box Styles

The Box Styles tool allows you to turn just about any element into a stylized box.

Add padding, borders, rounded edges, shadows and set the colors:

Mix and Match:

Apply to almost anything:

“Some men see things as they are and say, why; I dream things that never were and say, why not.”
- Robert F. Kennedy

This is just some random text to help illustrate the point. The funky oil reveals itself as a topmost mitten to those who look. Unfortunately, that is wrong; on the contrary, a sailor of the railway is assumed to be a lounging witch. The bugle of a speedboat becomes a mnemic capital. However, decimals are agog frowns.

This is just some random text for example purposes. A viola of the mouth is assumed to be a canny judge. The blushless turkish comes from a baggy jam. The macled lunch comes from a required calf. However, a fadeless patient's clef comes with it the thought that the sprucest saxophone is a carp.

Save for future use

Custom box styles can be saved to easily apply to other elements.

Popup Content

Tooltip Example Tooltip Text Popover Interactive Popover Modal Dialog

Modal Dialog Title

This is an example of modal dialog content. A sing is a larkish stick. A sweatshirt sees a workshop as an anxious bear. The semi menu reveals itself as a purging vault to those who look. Nowhere is it disputed that authors often misinterpret the nut as an unscorched apple, when in actuality it feels more like an obscene nigeria.

Quick Check

Put question text here

Answer A

Response text to display when this answer is selected.

Answer B

Answer B reply text

Check Answer

Need More?

HTML Snippets

Misc HTML Tags

Insert quote here

H5

H6

Enter text here

// Code

Code

Callouts

Info: Sample flash notice style.

Success: Sample flash notice style.

Warning: Sample flash notice style.

Error: Sample flash notice style.

Important Tip: Tag line

Enter message here

Info: Tag line

Enter message here

Success: Tag line

Enter message here

Warning: Tag line

Enter message here

Caution: Tag line

Enter message here

Important Tip: Message

Info: Message

Success: Message

Warning: Message

Caution: Message

Heading

Content

Heading

Content

Heading

Content

Heading

Content

Heading

Content

Heading

Content

Heading

Content

Heading

Content

Columns

2 Columns (Equal)

Content

Content

2 Columns (1/3, 2/3)

Content

Content

2 Columns (2/3, 1/3)

Content

Content

2 Columns (1/4, 3/4)

Content

Content

2 Columns (3/4, 1/4)

Content

Content

3 Columns (Equal)

Content

Content

Content

3 Columns (1/4, 1/4, 1/2)

Content

Content

Content

3 Columns (1/4, 1/2, 1/4)

Content

Content

Content

3 Columns (1/2, 1/4, 1/4)

Content

Content

Content

4 Columns (Equal)

Content

Content

Content

Content

Dividers

Images with Captions

Caption

A lathe is a stateside ATM. Tenty asphalts show us how yellows can be lentils. A satin can hardly be considered a weldless zebra without also being a stretch. A columnist is an era's colombia.

Far from the truth, a dead can hardly be considered a newish capital without also being a radiator. We can assume that any instance of a tub can be construed as a muzzy goat. They were lost without the unpruned son that composed their prosecution. It's an undeniable fact, really; some tricksy maths are thought of simply as caterpillars.

The literature would have us believe that a thistly asterisk is not but a beast. Authors often misinterpret the suit as a fleshy wine, when in actuality it feels more like a sluicing fender. The literature would have us believe that an unwise stopsign is not but a pakistan. The unkept holiday comes from a larboard treatment.

Caption

Some sphery germen are thought of simply as guarantees. It's an undeniable fact, really; the first rearmost edge is, in its own way, an energy. The quart is a golf. An alibi sees a grease as a thenar regret.

Some gammy runs are thought of simply as nitrogens. In recent years, before computers, ruths were only supports. Before files, reductions were only australias. A science sees a jar as a frumpy butane.

What we don't know for sure is whether or not before thoughts, humidities were only buildings. A tooth of the distribution is assumed to be a thousandth art. Nowhere is it disputed that some posit the biped cone to be less than ungraced. Some posit the ungilt breakfast to be less than hymnal.

The ghost is a reaction. A secretary is a bulldozer from the right perspective. Objectives are deuced compositions. Authors often misinterpret the ambulance as a squeamish chive, when in actuality it feels more like a streamy fox.

Caption

To be more specific, a psychiatrist of the punch is assumed to be a windy pond. Carrots are starry dibbles. The zeitgeist contends that the literature would have us believe that a useful beat is not but a fold. They were lost without the raving lyre that composed their shock.

Caption

Peer-to-peers are flatling cocktails. The carnations could be said to resemble heavies features. Nowhere is it disputed that a softball is a harried passenger. As far as we can estimate, a frugal select without pens is truly a steam of unmeant barges.

[Demo] Design Tools Examples