Fonts

Alignments and Widths

Sections

You can use a <section> to organize content on a page.

<section>

	<p>You can use a <section> to organize content on a page.</p>

</section>

Columns

This <section> consists of <columns>.

<div class="columns">

	<div class="column threeQuarterWidth">

		<div class="columnContent">

			<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Neque laoreet fringilla metus luctus malesuada varius nascetur quisque. Blandit netus convallis varius, lobortis laoreet blandit taciti fames blandit. Semper magna semper porta metus quisque dui non lacus tincidunt. Nunc aenean primis; vitae consequat tempus vulputate. Mus hendrerit turpis potenti felis placerat scelerisque parturient.</p>

		</div>

	</div>

	<div class="column quarterWidth lightGreyColumn">

		<div class="columnContent">

			<p>Cursus accumsan ante gravida phasellus id accumsan lacus. Feugiat in blandit, pretium integer odio nisi. Odio neque sagittis dis diam maecenas. Tristique cubilia etiam ut efficitur, ad egestas. Tristique potenti mattis tortor porttitor suscipit consectetur et semper. Consequat condimentum et ligula scelerisque at ante. Quam hendrerit mollis inceptos torquent bibendum lobortis tortor maecenas.</p>

		</div>

	</div>

</div>

Headings and Icons

Below are examples of headings to organize content on a page. Headings can be level-2 (<h2>) or level-3 (<h3>).

Level 2 Heading (Top Purple Line With Round Purple Icon)

<h2 class="topLine purpleLine"><span class="icon purpleIcon circleIcon calloutIcon"></span>Level 2 Heading (Top Purple Line With Round Purple Icon)</h2>

Level 3 Heading (Bottom Green Line with Square Green Icon)

<h3 class="bottomLine greenLine"><span class="icon greenIcon squareIcon calloutIcon"></span>Level 3 Heading (Bottom Green Line with Square Green Icon)</h3>

Level 2 Heading (Top Blue Dotted Line Without Icon)

<h2 class="topLine dottedLine blueLine">Level 2 Heading (Top Blue Dotted Line Without Icon)</h2>

Level 3 Heading (Bottom Grey Line With Basic Icon)

<h3 class="bottomLine greyLine"><span class="icon inclusionIcon"></span>Level 3 Heading (Bottom Grey Line With Basic Icon)</h3>

Figures and Images

To optimize accessibility, place images inside of figures. Each figure has an image (img) and a caption (figcaption). "Image 1" is three-quarter width and center-aligned (threeQuarterWidth and alignCenter classes), "Image 2" is half-width and left-aligned (halfWidth and alignLeft classes), and "Image 3" is one-quarter-width and right-aligned (quarterWidth and alignRight classes).

Lorem ipsum odor amet, consectetuer adipiscing elit. Sociosqu nostra libero congue eleifend arcu quisque curae turpis. Hendrerit praesent et magna tincidunt curae pellentesque gravida vulputate nisl. Torquent massa felis taciti; nibh iaculis justo. Augue nulla sollicitudin nisl, augue class nisl torquent. Tempus sagittis bibendum pulvinar curae sociosqu bibendum. Natoque sem est venenatis habitant ipsum a habitant. Maximus adipiscing fames fringilla volutpat suspendisse facilisis hendrerit. Erat montes dis non nascetur; mollis elit.

<figure class="threeQuarterWidth alignCenter">

	<img src="https://placehold.co/1200x200/400286/FFF?text=Image+1&font=Montserrat" alt="Image 1" />

	<figcaption>This is a figure/image caption. For more details, <a href="#">check out this resource</a>!</figcaption>

</figure>

<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Sociosqu nostra libero congue eleifend arcu quisque curae turpis. Hendrerit praesent et magna tincidunt curae pellentesque gravida vulputate nisl. Torquent massa felis taciti; nibh iaculis justo. Augue nulla sollicitudin nisl, augue class nisl torquent. Tempus sagittis bibendum pulvinar curae sociosqu bibendum. Natoque sem est venenatis habitant ipsum a habitant. Maximus adipiscing fames fringilla volutpat suspendisse facilisis hendrerit. Erat montes dis non nascetur; mollis elit.</p>

Venenatis aliquet faucibus iaculis fusce morbi morbi. Non condimentum aliquam aliquet non feugiat integer. Quam nostra vitae class ultricies nascetur eleifend. Senectus fringilla at duis at lobortis felis. Vulputate aptent in pharetra, tempor pulvinar porta porttitor litora. Fringilla ac fermentum magnis nisi et? Aptent montes fermentum suscipit pulvinar interdum volutpat. Enim libero sapien erat accumsan mi ad velit justo ex. Non finibus dolor, fusce tristique lectus semper montes.

<figure class="halfWidth alignLeft">

	<img src="https://placehold.co/1200x400/48A345/FFF?text=Image+2&font=Montserrat" alt="Image 2" />

	<figcaption>This is a figure/image caption. For more details, <a href="#">check out this resource</a>!</figcaption>

</figure>

<p>Venenatis aliquet faucibus iaculis fusce morbi morbi. Non condimentum aliquam aliquet non feugiat integer. Quam nostra vitae class ultricies nascetur eleifend. Senectus fringilla at duis at lobortis felis. Vulputate aptent in pharetra, tempor pulvinar porta porttitor litora. Fringilla ac fermentum magnis nisi et? Aptent montes fermentum suscipit pulvinar interdum volutpat. Enim libero sapien erat accumsan mi ad velit justo ex. Non finibus dolor, fusce tristique lectus semper montes.</p>

Maximus ridiculus fusce quis, consectetur donec hendrerit cursus. Sodales vulputate cubilia facilisis nascetur risus dapibus. Tincidunt nullam pulvinar tempus sit integer nam per dapibus. Maximus pretium condimentum inceptos justo; dis congue aliquet morbi diam. Cursus tristique tristique integer tellus aptent pulvinar blandit. Sit venenatis hac bibendum iaculis, velit mollis natoque. Vehicula penatibus ad malesuada dictum rutrum penatibus leo nec.

<figure class="quarterWidth alignRight">

	<img src="https://placehold.co/1200x800/4B5058/FFF?text=Image+3&font=Montserrat" alt="Image 3" />

	<figcaption>This is a figure/image caption. For more details, <a href="#">check out this resource</a>!</figcaption>

</figure>

<p>Maximus ridiculus fusce quis, consectetur donec hendrerit cursus. Sodales vulputate cubilia facilisis nascetur risus dapibus. Tincidunt nullam pulvinar tempus sit integer nam per dapibus. Maximus pretium condimentum inceptos justo; dis congue aliquet morbi diam. Cursus tristique tristique integer tellus aptent pulvinar blandit. Sit venenatis hac bibendum iaculis, velit mollis natoque. Vehicula penatibus ad malesuada dictum rutrum penatibus leo nec.</p>

Buttons

<div class="buttons ">

	<a href="#" class="button purpleButton smallButton">Small Purple Button</a>

	<a href="#" class="button greenButton mediumButton">Medium Green Button</a>

	<a href="#" class="button blueButton largeButton">Large Blue Button</a>

</div>

Callout Boxes

<div class="calloutBox lightPurpleBox halfWidth alignCenter">

	<h2 class="purpleText"><span class="icon purpleIcon circleIcon calloutIcon"></span>Callout Box (Purple Text)</h2>

	<p>This is a light purple callout box.</p>

</div>

<div class="calloutBox lightGreenBox threeQuarterWidth alignCenter">

	<h2 class="greenText"><span class="icon greenIcon squareIcon calloutIcon"></span>Callout Box (Green Text)</h2>

	<p>This is a light green callout box.</p>

</div>

<div class="calloutBox lightGreyBox">

	<h2 class="greyText"><span class="icon greyIcon circleIcon calloutIcon"></span>Callout Box (Grey Text)</h2>

	<p>This is a light grey callout box.</p>

</div>

Inclusion Tip

<div class="inclusionTip halfWidth alignCenter">

	<h2 class="purpleText"><span class="icon purpleIcon circleIcon inclusionIcon"></span>Inclusion Tip (Purple Text)</h2>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia orci bibendum velit tempor consectetur. Morbi venenatis augue orci, a finibus libero semper ac. Etiam molestie eros non lobortis vestibulum. Nulla a egestas velit, ac viverra purus. Proin faucibus nulla non nunc pharetra accumsan. Praesent sit amet maximus mauris. Donec ac fringilla lacus, sed euismod enim. Pellentesque lacinia ornare ante sit amet cursus. Sed sed venenatis erat. Phasellus accumsan finibus metus at imperdiet. Etiam nec nulla accumsan, tempor lectus quis, egestas velit. Nulla maximus elementum hendrerit. Praesent ultricies mauris rutrum, cursus enim eu, egestas mauris.</p>

</div>

Instructors Section

Interactives

Tabbed Section

• Embedded Practice
• Mental Number Line
• Linear Board Game

•  
• Embedded Practice Mental Number Line Linear Board Game
•  

Embedded Practice

During everyday routines and activities, regularly use language such as more, fewer, greater than, less than, same, and equal, regardless of whether or not a child can count. Regularly ask questions such as, "Which has more?" and "Which has fewer?" through visually comparing sets sizes. Prompt children to check their guesses using counting. Help children arrange up to three sets in a specified order (e.g., smallest to largest).

This is a quarter-width column.

Mental Number Line

Applying the counting sequence to collections helps children understand that the later a number word is in the sequence, the larger the set it represents. For example, counting "five" objects represents a larger set than counting "four" objects because five comes later in the number sequence. Various activities can help children develop a "mental number line" and an understanding that number words later in the counting sequence represent larger sets (and vice versa).

Linear Board Game

Linear board games can support children's development of a mental number line. Using games helps children see that the quantity or number presented on a spinner or dice is associated with how far a child can move on the game board, with higher quantities being associated with further distances on the board.

Simple linear board games, such as The Great Race (or one that you create), in which children count their number of moves from the starting position or count on from their current position on the board, have also been shown to result in improvements in a child's skills related to magnitude, counting, and numeral identification.

<div class="tabs" id="tabbedSection">

	<ul class="tabNavigation" id="desktopTabs">

		<li><a href="#tabbedSection" class="tabLink activeLink" onClick="displayTab(1);">Embedded Practice</a></li>
		<li><a href="#tabbedSection" class="tabLink" onClick="displayTab(2);">Mental Number Line</a></li>
		<li><a href="#tabbedSection" class="tabLink" onClick="displayTab(3);">Linear Board Game</a></li>

	</ul>

	<ul class="tabNavigation" id="mobileTabs">

		<li class="tabPrevious"><a href="#tabbedSection" name="Open previous tab section" onClick="changeTab('previous');"> </a></li>

		<li class="tabMenu">

			<select class="ic-Input" id="selectedTab" onChange="displayTab(this.value);">
				
				<option value="1">Embedded Practice</option>
				<option value="2">Mental Number Line</option>
				<option value="3">Linear Board Game</option>
			
			</select>

		</li>

		<li class="tabNext"><a href="#tabbedSection" name="Open next tab section" onClick="changeTab('next');"> </a></li>

	</ul>

	<div class="tabContent">

		<div class="tab activeTab" id="tab-1">

			<h3>Embedded Practice</h3>

			<div class="columns removeMarginTop">

				<div class="column threeQuarterWidth">

					<div class="columnContent">

						<p>During everyday routines and activities, regularly use language such as more, fewer, greater than, less than, same, and equal, regardless of whether or not a child can count. Regularly ask questions such as, "Which has more?" and "Which has fewer?" through visually comparing sets sizes. Prompt children to check their guesses using counting. Help children arrange up to three sets in a specified order (e.g., smallest to largest).</p>

					</div>

				</div>

				<div class="column quarterWidth lightGreyColumn">

					<div class="columnContent">

						This is a quarter-width column.

					</div>

				</div>

			</div>

		</div>

		<div class="tab" id="tab-2">

			<h3>Mental Number Line</h3>

			<figure class="quarterWidth alignRight">

				<img src="https://placehold.co/1200x600/400286/FFF?text=Mental+Number+Line&font=Montserrat" alt="Mental Number Line" />

				<figcaption>This is a figure/image caption. For more details, <a href="#">check out this resource</a>!</figcaption>

			</figure>

			<p>Applying the counting sequence to collections helps children understand that the later a number word is in the sequence, the larger the set it represents. For example, counting "five" objects represents a larger set than counting "four" objects because five comes later in the number sequence. Various activities can help children develop a "mental number line" and an understanding that number words later in the counting sequence represent larger sets (and vice versa).</p>

			<div class="clear"></div>

		</div>

		<div class="tab" id="tab-3">

			<h3>Linear Board Game</h3>

			<p>Linear board games can support children's development of a mental number line. Using games helps children see that the quantity or number presented on a spinner or dice is associated with how far a child can move on the game board, with higher quantities being associated with further distances on the board.</p>

			<figure class="halfWidth alignCenter">

				<img src="https://placehold.co/1200x400/48A345/FFF?text=Linear+Board+Game&font=Montserrat" alt="Linear Board Game" />

				<figcaption>This is a figure/image caption. For more details, <a href="#">check out this resource</a>!</figcaption>

			</figure>

			<p>Simple linear board games, such as <a href="https://education.umd.edu/sites/default/files/uploads/ECILab_The%20Great%20Race_Number%20Board%20Game_Parent%20Resource%20%281%29.pdf">The Great Race</a> (or one that you create), in which children count their number of moves from the starting position or count on from their current position on the board, have also been shown to result in improvements in a child's skills related to magnitude, counting, and numeral identification.</p>

		</div>

	</div>

</div>

Tables

<div class="tableContainer">

	<div role="table" aria-label="Sample Table" aria-describedby="sampleTableDescription" class="alignCenter">

		<div class="tableDescription" id="sampleTableDescription">Scroll to reveal columns.</div>

		<div role="rowgroup" class="Montserrat">

			<div role="row">

				<div role="columnheader" aria-sort="ascending">Rows (Column 1)</div>
				<div role="columnheader">Column 2</div>
				<div role="columnheader">Column 3</div>
				<div role="columnheader">Column 4</div>

			</div>

		</div>

		<div role="rowgroup">

			<div role="row">

				<div role="rowheader">Row 1</div>
				<div role="cell">Row 1 (Cell 2)</div>
				<div role="cell">Row 1 (Cell 3)</div>
				<div role="cell">Row 1 (Cell 4)</div>

			</div>

			<div role="row">

				<div role="rowheader">Row 2</div>
				<div role="cell">Row 2 (Cell 2)</div>
				<div role="cell">Row 2 (Cell 3)</div>
				<div role="cell">Row 2 (Cell 4)</div>

			</div>

			<div role="row">

				<div role="rowheader">Row 3</div>
				<div role="cell">Row 3 (Cell 2)</div>
				<div role="cell">Row 3 (Cell 3)</div>
				<div role="cell">Row 3 (Cell 4)</div>

			</div>

			<div role="row">

				<div role="rowheader">Row 4</div>
				<div role="cell">Row 4 (Cell 2)</div>
				<div role="cell">Row 4 (Cell 3)</div>
				<div role="cell">Row 4 (Cell 4)</div>

			</div>

		</div>

	</div>

</div>

Tiles

<div class="tilesContainer">

	<ul class="tiles threeColumns">

		<li class="tile linkedTile">

			<a href="#">

				<span class="tileHeading removePaddingBottom">
					<span class="primaryHeading">Tile Heading 1</span>
				</span>
				<span class="tileBody removePaddingTop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

			</a>

		</li>

		<li class="tile linkedTile">

			<a href="#">

				<span class="tileHeading removePaddingBottom">
					<span class="primaryHeading">Tile Heading 2</span>
				</span>
				<span class="tileBody removePaddingTop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

			</a>

		</li>

		<li class="tile">

			<span class="tileHeading removePaddingBottom">
				<span class="primaryHeading">Tile Heading 3</span>
			</span>
			<span class="tileBody removePaddingTop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

		</li>

		<li class="tile offset-1">

			<span class="tileHeading removePaddingBottom">
				<span class="primaryHeading">Tile Heading 4</span>
			</span>
			<span class="tileBody removePaddingTop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

		</li>

		<li class="tile linkedTile offset-2">

			<a href="#">

				<span class="tileHeading removePaddingBottom">
					<span class="primaryHeading">Tile Heading 5</span>
				</span>
				<span class="tileBody removePaddingTop">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

			</a>

		</li>

	</ul>

</div>

Topic Overview

Reveal Section

Pop-Up Section

Video and Transcript