Skip to main content Skip to navigation

Callouts

Highlight information within the flow of learning.

Definition

glossary term

Exponential notation is a shorter way to write
a number by using exponents.

<div class="comet-callout comet-callout--definition">
    <div class="comet-callout__icon-box">
        <svg class="comet-callout__icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#callout-glossary-term"></use>
        </svg>
        <div class="comet-screenreader-only">glossary term</div>
    </div>
    <div class="comet-callout__content">
        <p>Exponential notation is a shorter way to write
            <br>a number by using exponents. </p>
    </div>
</div>
                
{{ comet.callout(type="definition", content="Exponential notation is a shorter way to write <br>a number by using exponents. ", icon_screenreader_text="glossary term") }}
                
Macro params reference

Did You Know?

did you know?

Did You Know?

Heat is not a thing. It is energy.

<div class="comet-callout comet-callout--did-you-know">
    <div class="comet-callout__icon-box">
        <svg class="comet-callout__icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#callout-did-you-know"></use>
        </svg>
        <div class="comet-screenreader-only">did you know?</div>
    </div>
    <div class="comet-callout__content">
        <h3>Did You Know?</h3>
        <p>Heat is not a thing. It is energy.</p>
    </div>
</div>
                
{{ comet.callout(type="did-you-know",header="Did You Know?", content="Heat is not a thing. It is energy.", icon_screenreader_text="did you know?") }}
                
Macro params reference

Focus Benchmark

Focus Benchmark

A Clear and Present Danger: SS.7.C.2.5, SS.7.C.3.6

<div class="comet-callout comet-callout--focus-benchmark">
    <div class="comet-callout__icon-box">
        <svg class="comet-callout__icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#callout-state-standard"></use>
        </svg>
    </div>
    <div class="comet-callout__content">
        <h3>Focus Benchmark</h3>
        <p>A Clear and Present Danger: SS.7.C.2.5, SS.7.C.3.6</p>
    </div>
</div>
                
{{ comet.callout(type="focus-benchmark",header="Focus Benchmark", content="A Clear and Present Danger: SS.7.C.2.5, SS.7.C.3.6") }}
                
Macro params reference

Teacher Note

Teacher Note

In this investigation, students will look closely to discern commonality of structure, MP.7. Students develop a classification of quadrilaterals based on their properties, communicate justification of their classification to others, and critique each other’s work, MP.3.

<div class="comet-callout comet-callout--teacher-note">
    <div class="comet-callout__icon-box">
        <svg class="comet-callout__icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#callout-teacher-note"></use>
        </svg>
    </div>
    <div class="comet-callout__content">
        <h3>Teacher Note</h3>
        <p>In this investigation, students will look closely to discern commonality of structure, MP.7. Students develop a classification of quadrilaterals based on their properties, communicate justification of their classification to others, and critique each other’s work, MP.3.</p>
    </div>
</div>
                
{{ comet.callout(type="teacher-note",header="Teacher Note", content="In this investigation, students will look closely to discern commonality of structure, MP.7. Students develop a classification of quadrilaterals based on their properties, communicate justification of their classification to others, and critique each other’s work, MP.3.") }}
                
Macro params reference

Misconception

Misconception

Genes are not the same as chromosomes. Genes are segments of DNA that code for specific proteins. Each DNA molecule may contain hundreds or even thousands of genes. A chromosome is a structure that an entire DNA molecule forms along with some proteins that help give the chromosome shape.

<div class="comet-callout comet-callout--misconception">
    <div class="comet-callout__icon-box">
        <svg class="comet-callout__icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#callout-misconception"></use>
        </svg>
    </div>
    <div class="comet-callout__content">
        <h3>Misconception</h3>
        <p>Genes are not the same as chromosomes. Genes are segments of DNA that code for specific proteins. Each DNA molecule may contain hundreds or even thousands of genes. A chromosome is a structure that an entire DNA molecule forms along with some proteins that help give the chromosome shape.</p>
    </div>
</div>
                
{{ comet.callout(type="misconception",header="Misconception", content="Genes are not the same as chromosomes. Genes are segments of DNA that code for specific proteins. Each DNA molecule may contain hundreds or even thousands of genes. A chromosome is a structure that an entire DNA molecule forms along with some proteins that help give the chromosome shape.") }}
                
Macro params reference

Guidelines

  • Use when injecting visually distinct notices within long form text.

Class Reference

Class Applies to Outcome

.comet-callout

<div>

Initializes an element to contain base callout styles. Must be paired with a variation.

.comet-callout--definition

.comet-callout

Displays definition theme for message.

.comet-callout--did-you-know

.comet-callout

Displays did-you-know theme for message.

.comet-callout--focus-benchmark

.comet-callout

Displays focus-benchmark theme for message.

.comet-callout--teacher-note

.comet-callout

Displays teacher-note theme for message.

.comet-callout--misconception

.comet-callout

Displays misconception theme for message.

Macro Params Reference

Param Default Values Description

class

False

String

Additional classes added to the callout

content

False

String

The content to be displayed inside of a p tag in the callout

header

False

String

The content to be displayed inside of an h3 in the callout

icon_path

False

String

Allows the definition of an icon path for custom icons.

type

informational

definition, did-you-know, focus-benchmark, teacher-note, misconception

Sets the type of callout.

icon_screenreader_text

False

definition, did you know, focus benchmark, teacher note, misconception

If text does not dscribe callout's the purpose, provide a screenreader only text for screenreader user, in place of the SVG.

Navigation Menu