EWiki syntax

EWiki mantains its beta status, but now is widely available for all components.
Most old Wiki syntax can be used, see more info here Wiki syntax

Agnostic tags

You can use any HTML tag with EWiki, by simply enclosing the tag in brackets []. Also, you can convert any HTML tag to a Text container by adding -text to tag's name.

The Wiki compiler detects if you are using EWiki features, and enables EWiki syntax. This may have side effects if you compile with EWiki activated, but content does not have any EWiki feature. These side effects may be visible the next time you edit this specific content.

Containers and Text containers

EWiki defines a Container as the content wrapped between [tag] and [/tag]. Containers are similar to normal HTML containers, with no especial treatment for new lines and empty lines.

A Text container, on the other hand, is the content wrapped between [tag-text] and [/tag-text]. Text containers treat new lines as line feeds, and empty lines as the beginning of a new paragraph.

Type	Activation	Usage	Example
Container	[tag]...[/tag]	Banners, compositions, images...	[div]...[/div]
Text container	[tag-text]...[/tag-text]	Normal text, messages, mixed content...	[div-text]...[/div-text]

EWiki container type is -text at the start.

Mixed content

The directives related to changing the interpreter mode are no longer required. HTML can be embedded within wiki causing no extra formatting, except for text containers. Java code and XML can be included as blocks or inline using enclosing java and xml tags.

Despite allowing normal HTML, the compiler returns a well-formed result. Unclosed tags will be closed to ensure consistency.

Easy escaping characters

Any character can be escaped using the backslash. The exception are macro parameters, where compiler especial characters should be transformed to HTML entities.

Parameters

Parameters differ from HTML. They are enclosed within parenthesis, separated by commas, using a colon to divide the attribute from its value. In the simple form, [div(font-weight:bold)] will be as HTML <div style="font-weight:bold">. At this point, doesn't seem to help much, but let's consider this: [div(font-weight:bold,margin:10px,class:supersized)], where the HTML will be <div style="font-weight:bold;margin:10px" class="supersized")>. First thing you may notice is that the compiler detected class as a separated attribute. Also, it's not necessary to create a style, nor include quotes.

EWiki passes all attributes as CSS attributes, except for recognized names like class, href, etc. The later are expanded as HTML attributes.

Containers

As in HTML, EWiki tags are containers. You can add content within the container opening tag, and the closing tag.

EWiki introduces a major difference here, allowing any container to easily write text. By adding the suffix -text, EWiki containers create paragraphs by using simple line feeds. By default, the root container is a text container.

EWiki	HTML	Description
[div] Hello world [/div]	Hello world	Behaves as normal HTML, where line feeds are white spaces.
[div-text] Hello world [/div-text]	Hello world	Creates HTML paragraphs for new lines.

When in text containers, EWiki does not force a paragraph for the first block of text. This ensures not to create paragraphs inside macro containers, that may interfere with the expected result. To change this behavior for the first block of text, add an empty line at the beginning.

Macros

EWiki macros are resolved at compile time, when wiki is transformed to HTML. An expanded macro will not change, despite there are changes in the macro, until you save/compile the wiki content.

EWiki macros are self-contained in a single file, and the compiler finds and expands them.

An EWiki macro can have nested content, including more macros, or single line.

Macro parameters

Macro parameters are enclosed in parentheses, must be named as name=value and comma separated. Values with special characters, like a comma, can be enclosed in double or single quotes.

See the macro examples in the next section.

EWiki provided macros

AI

@w{aiContainer}

Creates a visible div if the AI is active.

aiContainer parameters	Description	Values
category	AI
class	Set classes for div
style	Adds CSS styles	See CSS documentation.

@w{aiInject}

Creates an anchor with a question for the AI.

aiInject parameters	Description	Values
category	AI
class	Set classes for anchor
style	Adds CSS styles	See CSS documentation.
question	Question to be injected

@w{aiInvisible}

Creates a visible div if the AI is inactive.

aiInvisible parameters	Description	Values
category	AI
class	Set classes for div
style	Adds CSS styles	See CSS documentation.

Actions

@w{action}

Creates an action button. Text can be enclosed or in text parameter.

action parameters	Description	Values
category	Actions
class	Adds extra classes to `ui button`	See Fomantic-UI definition for button.
style	Adds CSS styles	See CSS documentation.
link	*protocol:value*	Protocols accepted: nav, url, mailto, tel, action, tag, whats, tgram. Actions accepted: signin, signup, tellsomeone.

@w{button}

Creates a button. Text can be enclosed or in text parameter.

button parameters	Description	Values
category	Actions
class	Adds extra classes to `ui button`	See Fomantic-UI definition for button.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
link	Link action
onclick	On click action
new	True if the link opens a new page
text	Text inside the button

@w{buttons}

Creates a container for buttons.

buttons parameters	Description	Values
category	Actions
class	Adds extra classes to `ui buttons`	See Fomantic-UI definition for buttons.
style	Adds CSS styles	See CSS documentation.

Cards

@w{card}

Creates a card.

card parameters	Description	Values
category	Cards
class	Adds extra classes to `ui card`	See Fomantic-UI definition for card.
style	Adds CSS styles	See CSS documentation.
image	Adds an image

@w{cards}

Creates a container for cards.

cards parameters	Description	Values
category	Cards
class	Adds extra classes to `ui cards`	See Fomantic-UI definition for cards.
style	Adds CSS styles	See CSS documentation.

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header
meta	Adds a content metadata	Only for cards and items.

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters	Description	Values
category	Cards,Items
class	Adds extra classes to `extra content`
style	Adds CSS styles	See CSS documentation.

Containers

@w{accordion}

Creates an accordion.

accordion parameters	Description	Values
category	Containers
class	Adds extra classes to `ui accordion`	See Fomantic-UI definition for accordion.
style	Adds CSS styles	See CSS documentation.

@w{acontent}

Creates an accordion content.

acontent parameters	Description	Values
category	Containers
class	Adds extra classes to `content`	See Fomantic-UI definition for accordion.
style	Adds CSS styles	See CSS documentation.

@w{atitle}

Creates an accordion title.

atitle parameters	Description	Values
category	Containers
class	Adds extra classes to `title`	See Fomantic-UI definition for accordion.
style	Adds CSS styles	See CSS documentation.

@w{segment}

Creates a segment.

segment parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segment`	See Fomantic-UI definition for segment.
style	Adds CSS styles	See CSS documentation.

@w{segments}

Creates a container for segments.

segments parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segments`	See Fomantic-UI definition for segments.
style	Adds CSS styles	See CSS documentation.

@w{solid}

Creates a segment with the provided background color. Font color is automatically selected to make the content visible.

solid parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segment`	See Fomantic-UI definition for segment.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant.

@w{transparent}

Creates a segment with a transparent background.

transparent parameters	Description	Values
category	Containers
class	Adds extra classes to `ui segment`	See Fomantic-UI definition for segment.
style	Adds CSS styles	See CSS documentation.

Effects

@w{appear}

Creates an effect for the contained elements.

appear parameters	Description	Values
category	Effects
class	Effect name	scale, zoom, fade [up\|dowm\|left\|right], [horizontal\|vertical] flip, drop, fly [up\|dowm\|left\|right], swing [up\|dowm\|left\|right], browse [up\|dowm\|left\|right], slide [up\|dowm\|left\|right]
style	Adds CSS styles	See CSS documentation.

@w{disappear}

Creates an effect for the contained elements.

disappear parameters	Description	Values
category	Effects
class	Effect name	scale, zoom, fade [up\|dowm\|left\|right], [horizontal\|vertical] flip, drop, fly [up\|dowm\|left\|right], swing [up\|dowm\|left\|right], browse [up\|dowm\|left\|right], slide [up\|dowm\|left\|right]
style	Adds CSS styles	See CSS documentation.

@w{effect}

Creates an effect for the contained elements.

effect parameters	Description	Values
category	Effects
class	Effect name	pulsating, jiggle, flash, shake, pulse, tada, bounce, glow. To create a loop effect add looping.
loop	Creates a looping effect	Default is false.
style	Adds CSS styles	See CSS documentation.

effect macro is a block. It will wrap elements to produce the effect.

This may not work as expected when using effect on non-block elements.

To get the expected result, you can use the effect name in any macro, in the class attribute.

@w{eleff}

Creates an effect for the contained elements.

eleff parameters	Description	Values
category	Effects
class	Effect name	scaleHover, (text, dark)Shadow, (box, bottom, top, left, right)Shadow, (top, bottom)InnerShadow, underlined, (two, three, four)-columns, box-gradient
style	Adds CSS styles	See CSS documentation.

eleff macro is a block. It will wrap elements to produce the effect.

This may not work as expected when using eleff on non-block elements.

To get the expected result, you can use the effect name in any macro, in the class attribute.

@w{reveal}

Creates an effect for rvisible and rhidden embeded elements.

reveal parameters	Description	Values
category	Effects
class	Effect name	fade, move, rotate, left\|right\|up\|down, circular, small\|medium\|big\|huge\|massive
style	Adds CSS styles	See CSS documentation.

@w{rhidden}

Hidden element for reveal macro.

rhidden parameters	Description	Values
category	Effects

@w{rotated}

Creates a rotated content with the given degrees.

rotated parameters	Description	Values
category	Effects
class	Adds class attribute
style	Adds CSS styles	See CSS documentation.
degrees	Rotation	By default -2. Positive number rotates clockwise, negative number rotates counter clockwise.

@w{rvisible}

Visible element for reveal macro.

rvisible parameters	Description	Values
category	Effects

@w{visible}

Creates an effect for the contained elements.

visible parameters	Description	Values
category	Effects
role	Role for visible	See Elephant security for role syntax. Use with caution, content is hidden, but in page source.

Email

@w{button}

Creates a button compatible with emails. Button's content is enclosed.

button parameters	Description	Values
category	Email
color	Button background color	Any HTML/CSS color, or configured colors: primary, secondary, c1, ...
link	Link action

Grids

@w{column}

Creates a grid column. Defaults to use one column.

column parameters	Description	Values
category	Grids
class	Adds extra classes to `column`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.

@w{grid}

Creates a grid. Can nest row and column. Default to have sixteen columns.

grid parameters	Description	Values
category	Grids
class	Adds extra classes to `ui grid`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.

@w{row}

Creates a grid row. Can nest column.

row parameters	Description	Values
category	Grids
class	Adds extra classes to `row`	See Fomantic-UI definition for grid.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

Images

@w{centeredImage}

Creates a container for centered images.

centeredImage parameters	Description	Values
category	Images
class	Adds classes
style	Adds CSS styles	See CSS documentation.

@w{image}

Creates an image.

image parameters	Description	Values
category	Images
src	Image
class	Adds classes to ui image	centered,rounded,circular,avatar,fluid,bordered,[mini,tiny,small,medium,large,big,huge,massive][left/right floated][left/right spaced][top/middle/bottom aligned]
style	Adds CSS styles	See CSS documentation.

@w{linkImage}

Creates an image linked to a URL.

linkImage parameters	Description	Values
category	Images
src	Image
href	URL
class	Adds classes to ui image	centered,rounded,circular,avatar,fluid,bordered,[mini,tiny,small,medium,large,big,huge,massive][left/right floated][left/right spaced][top/middle/bottom aligned]
style	Adds CSS styles	See CSS documentation.

Items

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header
meta	Adds a content metadata	Only for cards and items.

@w{extra}

Creates extra content for cards, items. For items, should be nested into a content.

extra parameters	Description	Values
category	Cards,Items
class	Adds extra classes to `extra content`
style	Adds CSS styles	See CSS documentation.

@w{item}

Creates a item.

item parameters	Description	Values
category	Items
class	Adds extra classes to `ui item`	See Fomantic-UI definition for item.
style	Adds CSS styles	See CSS documentation.
imgclass	Adds extra classes to `ui image`	See Fomantic-UI definition for image.
image	Adds an image

@w{items}

Creates a container for items.

items parameters	Description	Values
category	Items
class	Adds extra classes to `ui items`	See Fomantic-UI definition for items.
style	Adds CSS styles	See CSS documentation.

Labels

@w{label}

Creates a label.

label parameters	Description	Values
category	Labels
class	Adds extra classes to `ui label`	See Fomantic-UI definition for label.
style	Adds CSS styles	See CSS documentation.
image	Adds an image
icon	Adds an icon
right	true if the icon is right aligned	Defaults to false.
text	Text inside the label
detail	Detail inside the label

@w{labels}

Creates a container for labels.

labels parameters	Description	Values
category	Labels
class	Adds extra classes to `ui labels`	See Fomantic-UI definition for labels.
style	Adds CSS styles	See CSS documentation.

Lists

@w{content}

Creates content for cards, items and lists.

content parameters	Description	Values
category	Cards,Items,Lists
class	Adds extra classes to `content`
style	Adds CSS styles	See CSS documentation.
header	Adds a content header
meta	Adds a content metadata	Only for cards and items.

@w{li}

Creates a list item. Text can be enclosed or in text parameter.

li parameters	Description	Values
category	Lists
class	Adds extra classes to `item`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
text	Text inside the list item

@w{lih}

Creates a list item with header. Text can be enclosed or in text parameter.

lih parameters	Description	Values
category	Lists
class	Adds extra classes to `item`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
header	Header inside the list item
text	Text inside the list item

@w{ol}

Creates an ordered list.

ol parameters	Description	Values
category	Lists
class	Adds extra classes to `ui list`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.

@w{ul}

Creates an unordered list.

ul parameters	Description	Values
category	Lists
class	Adds extra classes to `ui list`	See Fomantic-UI definition for list.
style	Adds CSS styles	See CSS documentation.

Messages

@w{message}

Creates a friendly formatted message. The message content goes between open and closing macro.

message parameters	Description	Values
category	Messages
class	Adds extra classes to `ui message`	warning, error, positive, negative... See Fomantic-UI definition for message.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
header	Adds a message header

@w{note}

Creates a friendly formatted message. The message content goes between open and closing macro.

note parameters	Description	Values
category	Messages
class	Adds extra classes to `ui segment`	warning, error, positive, negative.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.
header	Adds a message header

Multimedia

@w{video}

Creates a container for a video, adjusting sizes.

video parameters	Description	Values
category	Multimedia
url	Video url	For self-hosted videos.
source	Video source	youtube, vimeo, ... Defaults to youtube.
id	Video ID	Only when a source is specified.
placeholder	Image placeholder	Image to be shown while video is not playing. If none, the source provides it.

Statistics

@w{statistics}

Creates a statistic.

statistics parameters	Description	Values
category	Statistics
class	Adds extra classes to `ui statistic`	See Fomantic-UI definition for statistic.
style	Adds CSS styles	See CSS documentation.

@w{statistics}

Creates a statistic label.

statistics parameters	Description	Values
category	Statistics
class	Adds extra classes to `label`	See Fomantic-UI definition for statistic.
style	Adds CSS styles	See CSS documentation.

@w{statistics}

Creates a statistic value.

statistics parameters	Description	Values
category	Statistics
class	Adds extra classes to `value`	See Fomantic-UI definition for statistic.
style	Adds CSS styles	See CSS documentation.

@w{statistics}

Creates a container for statistics.

statistics parameters	Description	Values
category	Statistics
class	Adds extra classes to `ui statistics`	See Fomantic-UI definition for statistics.
style	Adds CSS styles	See CSS documentation.

Stripes

@w{stripe}

Creates a horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

stripe parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui fluid padded container segment`	See Fomantic-UI definition for segment and container.
innerClass	Adds extra classes to the inner `ui basic container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
innerColor	Content color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

@w{text}

Creates a text friendly segment.

text parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui basic text container segment`	See Fomantic-UI definition for segment and container.
innerColor	Content color	See CSS standard for accepted colors.
style	Adds CSS styles	See CSS documentation.

Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

This macro is provided as a commodity for text segments with normal color palette.

@w{textstripe}

Creates a text friendly horizontal stripe with the provided background color. Font color is automatically selected to make the content visible.

textstripe parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui fluid padded text container segment`	See Fomantic-UI definition for segment and container.
innerClass	Adds extra classes to the inner `ui basic container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
innerColor	Content color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

@w{widestripe}

Creates a horizontal wide stripe with the provided background color. Font color is automatically selected to make the content visible.

widestripe parameters	Description	Values
category	Stripes
class	Adds extra classes to `ui fluid padded container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.

Stripes are preferred when creating landing pages, since they won't use the whole page width when allocating content.

Support

@w{iframe}

Creates an iframe.

iframe parameters	Description	Values
category	Support
src	Iframe URL
width	Iframe width
height	Iframe height
allow	Iframe allow

@w{popup}

Creates a popup with the macro embedded content.

popup parameters	Description	Values
category	Support
class	Adds extra classes to `ui button`	See Fomantic-UI definition for button.
popupClass	Adds extra classes to `ui modal`	See Fomantic-UI definition for modal.
action	Call action
icon	Adds an action icon	See FontAwesome icons.
header	Popup header

@w{script}

Creates a script. If src has a value, the script is correctly closed.

script parameters	Description	Values
category	Support
src	Script URL

@w{spaced}

Creates a container for vertical spaced elements.

spaced parameters	Description	Values
category	Support
class	Adds extra classes to `spaced`
style	Adds CSS styles	See CSS documentation.

@w{stylesheet}

If href has a value, loads a stylesheet. If not, creates a style block.

stylesheet parameters	Description	Values
category	Support
href	Stylesheet URL

Tables

@w{table}

Creates a table. Can nest theader, trow, tcol and tfooter.

table parameters	Description	Values
category	Tables
class	Adds extra classes to `ui table`	See Fomantic-UI definition for table.
style	Adds CSS styles	See CSS documentation.

@w{tcol}

Adds a table column. If not value is set, content must be nested.

tcol parameters	Description	Values
category	Tables
class	Adds classes to `td`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
value	Value of the column
colspan	Columns will use this column
rowspan	Rows will use this column

@w{tfooter}

Adds a table footer.

tfooter parameters	Description	Values
category	Tables
class	Adds classes to `tfoot`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of footers, separated by \|	If the footer starts with >, will be right aligned.

@w{thead}

Adds a table header column. If not value is set, content must be nested.

thead parameters	Description	Values
category	Tables
class	Adds classes to `th`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
value	Value of the column
colspan	Columns will use this column
rowspan	Rows will use this column

@w{theader}

Adds a table header.

theader parameters	Description	Values
category	Tables
class	Adds classes to `thead`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of headers, separated by \|	If the header starts with >, will be right aligned.

@w{trow}

Adds a table row. If no values are set, the columns must be nested.

trow parameters	Description	Values
category	Tables
class	Adds classes to `tr`	See Fomantic-UI definition for table, and CSS documentation.
style	Adds CSS styles	See CSS documentation.
values	Values of columns, separated by \|	If the value starts with >, will be right aligned.

Text

@w{divider}

Creates a divider.

divider parameters	Description	Values
category	Text
class	Adds extra classes to `ui divider`	See Fomantic-UI definition of divider.
text	Adds text for horizontal and vertical dividers

@w{header}

Creates a header.

header parameters	Description	Values
category	Text
class	Adds extra classes to `ui header`	See Fomantic-UI definition of header.
style	Adds CSS styles	See CSS documentation.
icon	Adds an icon	See FontAwesome icons.

@w{inline}

Creates an inline text.

inline parameters	Description	Values
category	Text
class	Adds extra classes to `ui text`	See Fomantic-UI definition for text.
style	Adds CSS styles	See CSS documentation.
text	The text

@w{space}

Creates a hidden divider.

space parameters	Description	Values
category	Text

@w{striped}

Creates a striped text with the provided stripe color. Font color is automatically selected to make the content visible.

striped parameters	Description	Values
category	Text
class	Adds class attribute
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant. Also accepts 'radial' and 'linear'.
separation	Separation between lines	By default is 1.

@w{subheader}

Creates a subheader inside a header.

subheader parameters	Description	Values
category	Text
class	Adds extra classes to `sub header`	See Fomantic-UI definition of header.
standalone	true/false	Tells whether the sub header is standalone.
style	Adds CSS styles	See CSS documentation.

Uncategorized

@w{strip}

Creates a horizontal strip with the provided background color. Font color is automatically selected to make the content visible.

strip parameters	Description	Values
class	Adds extra classes to `ui fluid padded container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant.

@w{textstrip}

Creates a text friendly horizontal strip with the provided background color. Font color is automatically selected to make the content visible.

textstrip parameters	Description	Values
class	Adds extra classes to `ui fluid padded text container segment`	See Fomantic-UI definition for segment and container.
style	Adds CSS styles	See CSS documentation.
color	Background color	See CSS standard for accepted colors.
image	Background image	To ensure readability, the `color` should be image predominant.

Users

@w{signature}

Creates current user's signature.

signature parameters	Description	Values
category	Users

Macro examples

EWiki provided macros may help you to create rich content, like striped landing pages, documentation, encapsulation, ...

Headers

The macro header creates an HTML header with an optional icon and a sub header.

@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}

Headers can also change size.

@w{header(class=big,icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}

Stripes

The macros stripe and textstripe create a container that will reach the left and right borders, and a nested container with the normal width. This ensures a full stripe of the desired color, occupying the container limits. For landing pages, horizontal limits are the browser width.

@w{stripe(color=RedGold)}
@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}
@w{/stripe}

@w{textstripe(color=RedGold)}
@w{header(icon=cog)}
This is a header
@w{subheader}...with a sub header.@w{/subheader}
@w{/header}
@w{/textstripe}

Messages

The message macro is a way to draw attention to specific content.

@w{message(class=info,icon=info,header=Informative message)}
This content can be any EWiki content.
@w{/message}

This content can be any EWiki content.

@w{message(class=warning,icon=warning,header=Warning message)}
This content can be any EWiki content.
@w{/message}

This content can be any EWiki content.

Cards

The cards and card macros create an encapsulated content, with an optional image.

@w{card(image=repository(/topcard.jpg))}
@w{content(header=Card header)}
This content can be any EWiki content.
@w{/content}
@w{/card}

This content can be any EWiki content.

Wrapping cards within the cards macro can control how cards will show in rows, the type of card, color and more. Check the cards macro definition.

Items

The items and item macros create an encapsulated content, with an optional image.

@w{items}
@w{item(imgclass=tiny,image=repository(/topcard.jpg))}
@w{content(header=Card header)}
This content can be any EWiki content.
@w{/content}
@w{/item}
@w{/items}

This content can be any EWiki content.

Wrapping items within the items macro can control the type of item, color and more. Check the items macro definition.