Marsha Docs

Alert Shortcode

The alert shortcode allows WordPress administrators to easily post an "alert" anywhere on their page. The alert has multiple versions, depending on the message you want to convey.

Alerts should be used for notifications or to help share important information to your site visitors. The number of alerts per page should never exceed two as to ensure alerts actually do their purpose of standing out from the rest of the content.

The content of your alerts should be concise and to the point. They should rarely exceed more than 2-4 sentences.

Alert Shortcode Parameters

The parameters for the alert shortcode:

  • Type (type): There are 4 options for type of alert:
    • Red - This type will display the alert background as light red with red font.
    • Green - This type will display the alert background as green with white font.
    • Black - This type will display the alert background as black with white font.
    • Neutral - If you do not set any type parameter the alert box will display with a light gray background and black font.
  • Title (title): If you include the title parameter and value it will display the value as an uppercase, bold title for your alert box.
  • Icons (icon): You can include one of several included icons on the left side of the alert (see list below).

Icons

Table listing the available icons to use with the alerts shortcode.
Icon Title Icon Example
warning
announcement
flag
info
notification
pin
question

Alert Shortcode Examples

Default Alert

Shortcode
HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/efsalert]
<div class="marsha-alert gray">
    <div></div>
    <div class="alert-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Red Alert

Shortcode
HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="red"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/efsalert]
<div class="marsha-alert red">
    <div></div>
    <div class="alert-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Green Alert

Shortcode
HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="green"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/efsalert]
<div class="marsha-alert green">
    <div></div>
    <div class="alert-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Black Alert

Shortcode
HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="black"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.[/efsalert]
<div class="marsha-alert black">
    <div></div>
    <div class="alert-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Red Alert with Title

The title should not include any HTML or inline styles.

Shortcode
HTML
Sed Sagittis Libero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="red" title="Sed Sagittis Libero"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/efsalert]
<div class="marsha-alert red">
    <div></div>
    <div class="alert-content">
        <div class="alert-title">Sed Sagittis Libero</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Red Alert with Title and Warning Icon

The title should not include any HTML or inline styles.

Shortcode
HTML
Sed Sagittis Libero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="red" title="Sed Sagittis Libero" icon="warning"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/efsalert]
<div class="marsha-alert red">
    <div class="alert-svg"><svg class="h-5 w-5 lg:h-16 lg:w-16 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z"></path></svg></div>
    <div class="alert-content">
        <div class="alert-title">Sed Sagittis Libero</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.</p>
    </div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Green Alert with Announcement Icon

Shortcode
HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed varius leo, sed sagittis libero.

[efsalert type="green" icon="announcement"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.[/efsalert]
<div class="marsha-alert green">
    <div class="alert-svg"><svg class="h-5 w-5 lg:h-16 lg:w-16 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z"/></svg></div>
    <div class="alert-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas <a href="#">sed varius leo</a>, sed sagittis libero.</p>
    </div>
    </div>
Copy Code to Clipboard
Copy Code to Clipboard