Callouts – Design Portal

This shortcode allows you to create stylized boxes of text within a post that stand out on the page. You can change the style and text. Also, you cannot use HTML Code or other short codes as callout content.

Demo

Info: type=”info” – This is the “info” style callout box.

<div class="unified-block__callout  unified-block__callout--info" type="info" id="infoBox">
  <div class="unified-block__callout-content">
      <div class="unified-block__callout-icon-container unified-block__callout-icon-container--info">
        <svg xmlns="http://www.w3.org/2000/svg" width="26.949" height="26.949" viewBox="0 0 26.949 26.949">
          <g id="Group_1254" data-name="Group 1254" transform="translate(-2.813 -3.186)">
            <path id="Path_1576" data-name="Path 1576" d="M175.626,537.949h-22.3A2.326,2.326,0,0,1,151,535.626v-22.3A2.326,2.326,0,0,1,153.323,511h22.3a2.326,2.326,0,0,1,2.323,2.323v22.3A2.326,2.326,0,0,1,175.626,537.949Zm-22.3-25.09a.465.465,0,0,0-.465.465v22.3a.465.465,0,0,0,.465.465h22.3a.465.465,0,0,0,.465-.465v-22.3a.465.465,0,0,0-.465-.465Z" transform="translate(-148.187 -507.813)" fill="#333"/>
            <path id="Path_1577" data-name="Path 1577" d="M178.161,529.323a1.162,1.162,0,1,1,1.162-1.162A1.16,1.16,0,0,1,178.161,529.323Z" transform="translate(-162.105 -516.379)" fill="#333" fill-rule="evenodd"/>
            <path id="Path_1578" data-name="Path 1578" d="M178.646,543.433h-.929v-6.97c0-.513-.416-.465-.929-.465h-.929c-.513,0-.929.184-.929.7s.465.7.929.7v6.04h-.929a.929.929,0,1,0,0,1.858h3.717a.929.929,0,1,0,0-1.858Z" transform="translate(-160.499 -521.196)" fill="#333"/>
          </g>
        </svg>
      </div>
      <div class="unified-block__callout-text"><span class="unified-block__callout-text--info">Info: </span>type=”info” – This is the “info” style callout box.                        
      </div>
  </div>
</div>

/* ==================================================================
	BASE CALLOUT
================================================================== */

.unified-block__callout {
  &-icon-container {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  &-content {
    display: inline-flex;
  }

  &-text {
    display: block;
  }
} 

/* ==================================================================
	CALLOUT OVERRIDES
================================================================== */

.unified-block__callout {
  border: 0.094rem solid transparent;
  border-style: solid none;

  &--error {
    border-color:#CE3333;
  }
  &--info {
    border-color: #008486;
  }
  &--key-takeaways {
    border-color:#D9B482;
  }
  &--note {
    border-color:#A8A8A8;
  }
  &--question {
    border-color:#008CB9;
  }
  &--success {
    border-color:#7CAA24;
  }
  &--tip {
    border-color:#00B7F1;
  }
  &--warning {
    border-color:#EABC3C;
  }

  &-icon-container {
    border-radius: 50%;
    height: 2.1875rem; 
    margin-right: .625rem;
    min-width: 2.1875rem;
    width: 2.1875rem;
    
    &--error {
      background-color: #f4e7eb;
    }
    &--info {
      background-color: #e7f4ee;
    }
    &--key-takeaways {
      background-color: #f4f1ed;
    }
    &--note {
      background-color: #f0f0f0;
    }
    &--question {
      background-color: #dff1f7;
    }
    &--success {
      background-color: #f2f7e9;
    }
    &--tip {
      background-color: #f4f7fb;
    }
    &--warning {
      background-color: #f8f1e1;
    }
  }

  &-content {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    padding: 1.25rem 0.5rem 1.25rem 0;
    text-decoration: none; 
  }

  &-text {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    margin: 0.25rem 0 0 0;
    text-align: justify;

    &--error {
      color:#CE3333;
    }
    &--info {
      color:#008486;
    }
    &--key-takeaways {
      color:#D9B482;
    }
    &--note {
      color:#A8A8A8;
    }
    &--question {
      color:#008CB9;
    }
    &--success {
      color:#7CAA24;
    }
    &--tip {
      color:#00B7F1;
    }
    &--warning {
      color:#EABC3C;
    }

    &--error,
    &--info,
    &--key-takeaways,
    &--note,
    &--question,
    &--success,
    &--tip,
    &--warning {
      font-weight: 700;
    }
  }

  &-icon {
    height: 1.3125rem;
    min-width: 1.3125rem;
    outline: none;
    width: 1.3125rem;
  }
}

@media (min-width: $lg) {
  .unified-block__callout {
    &-icon-container {
      height: 2.75rem;
      min-width: 2.75rem;   
      width: 2.75rem;   
    }

    &-icon {  
      height: 1.625rem;       
      min-width: 1.625rem;              
      width: 1.625rem;
    }
  }
}

No JS! 😀

Note

These callout examples are based on the WalletGenius theme.
Callouts can be re-styled in many ways - such as removing the icon, changing colors etc.

States & Variations

We currently support 8 different styles of callouts:

Info

Info: type=”info” – This is the “info” style callout box.

Note

Note: type=”note” – This is the “note” style callout box.

Success

Success: type=”success” – This is the “success” style callout box.

Error

Error: type=”error” – This is the “error” style callout box.

Warning

Warning: type=”warning” – This is the “warning” style callout box.

Question

Question: type=”question” – This is the “question” style callout box.

Tip

Tip: type=”tip” – This is the “tip” style callout box.

Key Takeaways

Key-takeaways: type=”key-takeaways” – This is the “key” style callout box.

No Icon

In order to remove the icon, a developer will need to hide the icon-container with CSS

Info: type=”info” – This is the “info” style callout box.

Usage

Callout short codes always begin with [ unified_callout type="TYPE" ] and end with [ /unified_callout ]

Option name	Possible values	Default value
type Callout style	info, note, success, error, warning, question, tip, key-takeaways	info
id Enter a word or two, without spaces, to make a unique web address just for this element. Then, you’ll be able to link directly to this section of your page.	Any string value, without spaces	– none –