Callouts are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text.
They are used to help direct a user’s attention to important pieces of information.
It can be used anywhere on the page but should not be confused with an alert pattern.
A callout is useful for highlighting an import piece of information.
<div class="ds-block">
<div class="ds-callout">
<div class="ds-callout__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>
</svg>
</div>
<div class="ds-callout__text">
<p>This program is subject to minimum enrolment numbers. A refund will be provided if the program is cancelled.</p>
</div>
</div>
</div>The callout can include a heading and CTA button
<div class="ds-block">
<div class="ds-callout">
<div class="ds-callout__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>
</svg>
</div>
<div class="ds-callout__text">
<h2 class="ds-callout__heading">
Make an informed choice
</h2>
<p>Our one-on-one consultations are designed to hone in on your objectives and provide practical guidance about your study options</p>
<p><a class="ds-btn-primary ds-icon-users" id="" href="https://example.org">Book one-on-one</a></p>
</div>
</div>
</div>The callout can include a collapse section instead of a CTA button, wher more explantary information is required
<div class="ds-block">
<div class="ds-callout">
<div class="ds-callout__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>
</svg>
</div>
<div class="ds-callout__text">
<h2 class="ds-callout__heading">
Make an informed choice
</h2>
<p>Our one-on-one consultations are designed to hone in on your objectives and provide practical guidance about your study options</p>
<p><button class="ds-btn-primary ds-btn--small ds-icon-chevron-down ds-icon--red ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >Read more</button></p>
</div>
<div class="ds-callout__collapse-wrapper">
<div id="further1" class="ds-collapse__content" role="region" hidden>
<p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health authorities.</p>
<p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we deliver some courses might change from face-to-face to online for a while; academic start dates and subject availabilities might be adjusted for some courses to ensure that students can progress; and access to work-integrated learning opportunities such as clinical placements might be limited for a period of time. However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
<p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any changes are made to our current courses.</p>
<p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
</div>
</div>
</div>
</div>Use the ds-callout--centered modifier the center the callout.
<div class="ds-block">
<div class="ds-callout ds-callout--centered">
<div class="ds-callout__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>
</svg>
</div>
<div class="ds-callout__text">
<p>Study online now and on campus later. <button class="ds-btn-link ds-icon-chevron-down ds-icon--red ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >Read more</button></p>
</div>
<div class="ds-callout__collapse-wrapper">
<div id="further1" class="ds-collapse__content" role="region" hidden>
<p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health authorities.</p>
<p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we deliver some courses might change from face-to-face to online for a while; academic start dates and subject availabilities might be adjusted for some courses to ensure that students can progress; and access to work-integrated learning opportunities such as clinical placements might be limited for a period of time. However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
<p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any changes are made to our current courses.</p>
<p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
</div>
</div>
</div>
</div>Use the ds-callout--minimal modifier for a minimal version.
<div class="ds-block">
<div class="ds-callout ds-callout--centered ds-callout--minimal">
<div class="ds-callout__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12" y2="8"></line>
</svg>
</div>
<div class="ds-callout__text">
<p>Study online now and on campus later. <button class="ds-btn-link ds-icon-chevron-down ds-icon--red ds-collapse__trigger" aria-controls="further1" aria-expanded="false" >Read more</button></p>
</div>
<div class="ds-callout__collapse-wrapper">
<div id="further1" class="ds-collapse__content" role="region" hidden>
<p>In response to COVID-19, La Trobe University is closely following the advice of State and Federal health authorities.</p>
<p>As the situation evolves, the courses we offer, and how we offer them, may need to adapt. For example, how we deliver some courses might change from face-to-face to online for a while; academic start dates and subject availabilities might be adjusted for some courses to ensure that students can progress; and access to work-integrated learning opportunities such as clinical placements might be limited for a period of time. However, our aim is to always provide an excellent learning experience and outcomes for our students.</p>
<p>We will make our best efforts to limit disruption and to inform future students as soon as possible if any changes are made to our current courses.</p>
<p>In the meantime, please go ahead with your application now for our Semester 2 intake which is due to start on 20th July. Book a consultation or call us if anything is unclear and we’ll be happy to help.</p>
</div>
</div>
</div>
</div>