Callouts

Highlight information within the flow of learning.

Definition

callout-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-labelledby="title">
            <title>callout-glossary-term</title>
            <use xlink:href="/comet/comet_assets/comet.svg#callout-glossary-term"></use>
        </svg>
    </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. ") }}
                
Macro params reference

Did You Know?

callout-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-labelledby="title">
            <title>callout-did-you-know</title>
            <use xlink:href="/comet/comet_assets/comet.svg#callout-did-you-know"></use>
        </svg>
    </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.") }}
                
Macro params reference

Focus Benchmark

callout-state-standard

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-labelledby="title">
            <title>callout-state-standard</title>
            <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

callout-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-labelledby="title">
            <title>callout-teacher-note</title>
            <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

callout-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-labelledby="title">
            <title>callout-misconception</title>
            <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.