Components

Callout card

Callout boxes are to be used when you have a variety of different areas of the website you wish to highlight and allow users to navigate to. This is usually on the homepage of a website as it is used repeatedly to allow users to navigate to priority areas.

Example

                                
                                <div class="card--size-fullwidth__holder">
<div class="card card--cta">
<h3><a href="https://beta.southglos.gov.uk/planning-and-development/" title="Planning and development">Planning and development</a></h3><ul><li class="card--cta__linkitem"><a href="https://beta.southglos.gov.uk/planning-and-development/planning-applications/" title="Planning applications">Planning applications</a></li>                        
<li class="card--cta__linkitem"><a href="https://beta.southglos.gov.uk/planning-and-development/building-control/" title="Building control">Building control</a></li>                        
<li class="card--cta__linkitem"><a href="https://beta.southglos.gov.uk/planning-and-development/planning-policy/" title="Planning policy">Planning policy</a></li>                        
<li class="card--cta__linkitem"><a href="https://beta.southglos.gov.uk/planning-and-development/conservation-and-regeneration/" title="Conservation and regeneration">Conservation and regeneration</a></li>                        
</ul>
</div>
</div>

Portal Code example

  • These are usually generated under web link sets and the output is pre-determined.

Portal generated weblink sets

Your account

HTML panel

You need to store the content of this in a content snippet, and use liquid templating to call it

Your profile

Edit your account details and contact preferences here.

View profile 
                        
                        <h2>Portal generated weblink sets</h2>
<div class="weblinks-depth-1 weblinks list-group" data-weblinks-depth="1">
<div class="panel-heading profile-panel-heading">
<div class="panel-title">
<h2 class="heading1 lace-profile-panel-text clearfix">Your account</h2>
</div>
</div>
<ul class="weblink-set">
<li><a class="weblink list-group-item" href="/profile/" title="Profile" aria-label="Profile"><span class="weblink-name">Profile</span></a></li>
<li><a class="weblink list-group-item" href="/Address-Book/" title="Address book" aria-label="Address book"><span class="weblink-name">Address book</span></a></li>
<li><a class="weblink list-group-item" href="https://www.southglos.gov.uk/gardenwaste" title="Apply for or renew a garden waste subscription" aria-label="Apply for or renew a garden waste subscription"><span class="weblink-name">Apply for or renew a garden waste subscription</span></a></li>
<li><a class="weblink list-group-item" href="https://www.southglos.gov.uk/collectiondates" title="Collection dates" aria-label="Collection dates"><span class="weblink-name">Collection dates</span></a></li></ul>
</div>
<h2>HTML panel</h2>
<p>You need to store the content of this in a content snippet, and use <a href="https://docs.microsoft.com/en-us/dynamics365/portals/liquid-objects#snippets" target="_blank">liquid templating</a> to call it</p>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<h2 class="heading1">Your profile</h2>
</div>
</div>
<div>
<p>Edit your account details and contact preferences here.</p>
<a href="/" title="View profile" class="btn-primary btn mt-1">View profile</a>
</div>
</div>

When to use this

You should use this component on a homepage where you wish to display your priority destinations.

When not to use this

Repeatedly throughout a website when you should use listed link buttons instead.

Back to top