Message boxes

These message boxes are extremely versatile. You can choose one of the presets, or style them to your liking! Pick your own colors, use gradients, rounded corners and much more.

Presets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.

 

Without rounded corners

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.

 

With gradient

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus enim quis lectus malesuada mollis. Aliquam bibendum malesuada lorem, vel varius est vulputate quis.

 

Message [message]

Creates a nicely formatted message

Parameters

  • margin

    Enables you to add margins to the element
    Default: normal

    Possible Values

    • small
      Add a margin of 22px below the line
    • normal
      Add a margin of 44px below the line
    • large
      Add a margin of 66px below the line
    • css value
      If you would like to add a margin to the element use the following notation: 11px 20px 8px 9px. The element will have a 11px top margin, a 20px right margin, an 8px bottom margin and a 9px left margin.
  • color

    Enables you to specify the text color of this element
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
      primary
      red
      cyan
      yellow
      black
      blue
      green
      purple
      orange
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • background

    Enables you to specify the background color of this element
    Default: primary

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
      primary
      red
      cyan
      yellow
      black
      blue
      green
      purple
      orange
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • radius

    Set the border radius of the element
    Default: 5px

    Possible Values

    • css value
      Any valid CSS value can be used for the border radius, eg: 3px
  • gradient

    Apply a gradient based on the background color
    Default: no

    Possible Values

    • yes
      A gradient will be applied
    • no
      The background will be a solid color
  • shadow

    Apply a drop shadow to the element
    Default: yes

    Possible Values

    • yes
      A drop shadow will be applied
    • no
      There will be no drop shadow
  • border_style

    Choose the style for this border
    Default: solid

    Possible Values

    • dotted
      Created a dotted border
    • dashed
      Created a dashed border
    • solid
      Created a solid border
  • border_width

    Specify the width of the border
    Default: 1px

    Possible Values

    • css value
      The value of this property can be any valid CSS value. We recommend using pixels (eg: 2px ), but you may also use any other css specification.
  • border_color

    Enables you to specify the color of the border
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • outline_style

    Choose the style for this outline
    Default: solid

    Possible Values

    • dotted
      Created a dotted border
    • dashed
      Created a dashed border
    • solid
      Created a solid border
  • outline_width

    Specify the width of the outline
    Default: 0px

    Possible Values

    • css value
      The value of this property can be any valid CSS value. We recommend using pixels (eg: 2px ), but you may also use any other css specification.
  • outline_color

    Enables you to specify the color of the outline
    Default: auto

    Possible Values

    • A preset color
      Choose from any of our preset colors, just type its name
    • Hex color
      Use any hex color value. Add a pound symbol in front of the color name; eg: #353535
    • auto
      If set to auto the color will be set automatically, according to the item's background color. If the background is light, the color will be dark and vica-versa.
    • RGB color
      Use any RGB color. Use the following format: rgb(120,120,120)
  • style

    Add custom styles to this element

    Possible Values

    • css rules
      Add any css rules as if you were adding them inline. To add a border and a margin for example you could write: "margin-bottom:10px; border:1px solid white"