← back to the module index

Test: callout

Generic callout applied to a container

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias veniam esse, deserunt eius facilis sit laudantium veritatis soluta corrupti repudiandae.


Callout with screen reader only title

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Eum accusantium fuga libero delectus dolor, dicta eaque obcaecati doloremque corporis ut amet molestias totam a rerum eius vitae, laboriosam soluta unde!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, tempora voluptates aliquid minus minima repellendus est porro facilis numquam excepturi totam quo, deleniti atque voluptas accusantium dicta, incidunt ad? Temporibus.


Generic callout applied to a container with au-body

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.


Calendar event callout

Description of the callout

The next public holiday is:

New Year’s Day

Generic callout applied to a container --dark

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias veniam esse, deserunt eius facilis sit laudantium veritatis soluta corrupti repudiandae.


Callout with screen reader only title --dark

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Eum accusantium fuga libero delectus dolor, dicta eaque obcaecati doloremque corporis ut amet molestias totam a rerum eius vitae, laboriosam soluta unde!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, tempora voluptates aliquid minus minima repellendus est porro facilis numquam excepturi totam quo, deleniti atque voluptas accusantium dicta, incidunt ad? Temporibus.


Generic callout applied to a container with au-body --dark

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.


Calendar event callout --dark

Description of the callout

The next public holiday is:

New Year’s Day

Generic callout applied to a container --alt

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.

Generic callout applied to a container --dark --alt

The following container has the callout class, and holds a number of paragraphs.

Description of the callout

Nullam quis aliquam massa. Nunc suscipit, nisi in facilisis tempus, lectus quam ullamcorper tellus, in rutrum ipsum tortor sed nisl.

Duis condimentum maximus ligula sed tincidunt.