Highlight

Ready

Notes
Info
HTML
View
Context

A highlight is a component in Modern Campus CMS and is part of the call to action (CTA) above highlights pattern.

Within this pattern you may highlight multiple values such as costs, percentages or dates.

Within a full-width layout, four highlights may be present.

Within the interior page layout, three maximum is suggested.

Build a CTA above highlights in Modern Campus CMS

Handle: @highlight
Preview:
- With layout
- Component only
Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/highlight/highlight.hbs
Referenced by (1): @call-to-action-above-highlights


        
        <div class="ContentBlock highlight">
    <div class="eyebrow">Lorem ipsum</div>
    <div class="value">100</div>
    <div class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus libero magnam exercitationem!</div>
    <a href="#" class="button secondary">Lorem ipsum</a>
</div>


        <div class="ContentBlock highlight{{#if selected}} selected{{/if}}">
  {{#if eyebrow}}
    <div class="eyebrow">{{eyebrow}}</div>
  {{/if}}
  <div class="value">{{value}}</div>
  <div class="description">{{description}}</div>
  {{#if link}}<a href="{{link.url}}" class="button secondary">{{link.text}}</a>{{/if}}
</div>


        
            
            {
  "eyebrow": "Lorem ipsum",
  "value": 100,
  "description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus libero magnam exercitationem!",
  "link": {
    "text": "Lorem ipsum",
    "url": "#"
  }
}