Example

This is an example page of elements and components we can have in the new documentation

Headings, starting with heading 2

There are 6 levels of headings but you should always start with level 2, that is two ## characters. Level 1 is reserved for the title of the full page.

Heading 2 can be done with two ## characters:

## Heading 2

Heading 3

Can be done with three ### characters:

### Heading 3

Heading 4

For level 4, use four #### characters:

#### Heading 4

Heading 5

For level 5, use five ##### characters:

##### Heading 5

Heading 6

For level 6, use six ###### characters:

###### Heading 6

Text effects

You can have italic text by wrapping it inside one one asterisk: italic

*italic*

For bold text, use two asterisks: bold

**bold**

Use three asterisks for bold and italic: bold and italic

***bold and italic***

Use strikethrough for deletions: strikethrough

~~strikethrough~~

Links

Links can be created with square brackets followed by parentheses: Link Text

[Link Text](http://example.com)

For a reference style link: Link Text

[Link Text][1]

[1]: http://example.com

Blockquotes

Blockquotes can be indicated using the > symbol:

This is a blockquote. Add the actual double quote characters “yourself” if you are using this as a quote as in someone said something.

> This is a blockquote. Add the actual double quote characters "yourself" if you are using this as a quote as in someone said something.

Lists

Unordered Lists

Use asterisks to create an unordered list:

• Item 1
• Item 2
  • Sub-item 1
  • Sub-item 2

* Item 1
* Item 2
  * Sub-item 1
  * Sub-item 2

Ordered Lists

Use numbers followed by periods for an ordered list:

1. First item
2. Second item
   1. Subitem 1
   2. Subitem 2

1. First item
2. Second item
   1. Subitem 1
   2. Subitem 2

Images

Images are similar to links but use an exclamation mark before the square brackets:

Code Blocks

Inline code can be indicated with backticks: inline code

`inline code`

For larger code blocks, use three backticks:

function example() {
  return "This is a code block";
}

Syntax highlighting

Always define the language like this:

# this is ruby code
array = ['some', 'code']
puts "Choosing one of them: #{array.sample}"

def foo
  puts 'foo'
end

Plain code blocks

If you do not define the language or define “plain” it is treated differently

def foo
  puts 'this will not be syntax coloured'
end

Horizontal Rules

Horizontal rules can be added with three dashes:

---

Tables

Tables can be created using pipes and dashes:

| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Tables with popovers and icons

Tables work well with inline popovers for contextual information. Use \n in popover content to create line breaks — useful for country-specific lists or multi-line explanations that would otherwise break table syntax.

<!-- Icons: use $$$circle-check and $$$xmark for visual check/cross indicators -->
<!-- Popovers: use &&&trigger >>> content&&& for inline definitions -->
<!-- Line breaks in popovers: use \n for multi-line content inside tables -->

| Feature | Service A | Service B |
|---|---|---|
| Organisation number | $$$circle-check &&&Varies by country >>> NO: Organisation number.\nSE: Organisation number.\nDK: CVR number.\nFI: Business ID (y-tunnus)&&& | $$$circle-check |
| Account number | $$$circle-check &&&Format varies >>> NO: Account number.\nSE: BankGiro.\nDK: FIK&&& | $$$circle-check |
| Reference number | $$$circle-check &&&Details >>> Longer explanation here.\nSecond point.\nThird point.&&& | $$$xmark Not available |

Our own components

You can add our own custom components with special syntax right there in the Markdown file.

Badge

Badges can be created using three ! characters followed by the variant type. Close the badge with another three ! characters.

Available variants: brand, success, neutral, warning, danger

Brand badge

Success badge

Neutral badge

Warning badge

Danger badge

Badge with animations

Badge with appearance styles

Pill badge

Button

Buttons can be created using three % characters followed by the variant type and optional URL. Close the button with another three % characters.

Available variants: brand, success, neutral, warning, danger

Button with link

Button without link

Different button variants

Button with icons

Button with start and end icons

Button with sizes and appearances

Card

Cards can be created using three = characters to open and close the card content.

Comparison (Before/After)

Comparison components can be created using three | characters optionally followed by a position value (0-100, default is 50).

Default comparison (50% position)

Comparison with custom position (10%)

Copy Button

Copy buttons can be created using three < characters. The content inside will be copied to the clipboard when clicked.

npm install @web-awesome/components

Tag

Tags can be created using three @ characters followed by the variant type. Close the tag with another three @ characters.

Available variants: brand, success, neutral, warning, danger

Brand tag

brand

Success tag

success

Neutral tag

neutral

Warning tag

warning

Danger tag

Tag with icons

Tag with sizes and appearance

Removable tag

Icons

Icons can be added inline using three $ characters followed by the icon name. You can use any Font Awesome icon — both free and pro icons are available.

Basic icons

$$$circle-check $$$circle-xmark $$$triangle-exclamation $$$circle-info $$$star $$$gear $$$rocket $$$shield

Icons inline with text

Status: Active — the service is running.

This feature is in beta and may change.

For more details, see the API reference.

Status: $$$circle-check Active — the service is running.

$$$triangle-exclamation This feature is in beta and may change.

$$$circle-info For more details, see the API reference.

Icons in tables

Icons work well in tables as status indicators — see the tables with popovers and icons example above.

| Feature | Status |
|---|---|
| Invoice sending | $$$circle-check Supported |
| Line scanning | $$$xmark Not available |

Callouts

Callouts can be done with the following syntax, using three : characters followed by the type of callout, and ending with again, three : characters. Like code blocks but with a different character.

info

success

neutral

warning

danger

With custom icon

With sizes

With appearance styles

Dialogs

Dialogs (modals) can be created using three ? characters followed by optional parameters, then the button text, followed by three > characters to separate the dialog content. Close the dialog with another three ? characters.

Optional parameters:

• light-dismiss - Dialog closes when clicking outside
• Width value (e.g., 500px, 50vw, 40em) - Set custom dialog width

Basic dialog

Dialog with light dismiss

Dialog with custom width

Dialog with all options combined

Popovers

Popovers create floating content that appears on hover, attached to a trigger element. Use three & characters to open and close the popover. The trigger text and popover content are separated by three > characters.

Optional parameters:

• Placement: top (default), bottom, left, right
• link - Renders trigger as underlined inline text instead of a button
• without-arrow - Hides the popover arrow
• distance:N - Custom distance in pixels between trigger and popover

Basic popover with button trigger

Popover with link-style trigger

Use the link parameter to blend the trigger naturally into prose text. This is useful for inline definitions and contextual help.

Peppol

operator networks

Popover placement options

Popover without arrow

Popover with custom distance

Popover with rich content

Combined parameters

invoice validation

Inline popovers

Inline popovers can be used directly within a sentence. They always render as link-styled triggers (underlined text). The syntax is <button type='button' id='popover-58a22e77' class='ma-popover-trigger' style='background: none; border: none; padding: 0; color: inherit; text-decoration: underline; text-decoration-style: dotted; cursor: pointer; font: inherit;'>trigger text</button><wa-popover for='popover-58a22e77' placement='top'>popover content</wa-popover> on a single line.

Send invoices via PeppolPeppol is a standardized e-invoicing network used across Europe to your trading partners.

You can add placement parameters before the trigger text: learn about API authenticationAPI keys are used to authenticate your requests to the Maventa API in our documentation.

Combine multiple parameters: check the invoice validationInvoices are validated against Peppol business rules before being sent rules before submitting.

Multiple inline popovers on the same line: use PeppolPan-European e-invoicing network or SFTPSecure file transfer protocol for batch processing for delivery.

Inline code works as trigger text too: use scheme 0106 or 9944Depends on which identifier was used to register the company account in Maventa for Dutch companies.

Image Dialogs (Auto-transformation)

When image_dialog: true is enabled in _config.yml, all markdown images automatically become clickable and open in full-size dialogs.

Standard images that open in dialogs

Click on these images to view them in full size:

Images with custom dialog width

Control the dialog width by adding a width parameter in the image title:

This image will open in a dialog that takes 50% of the viewport width:

This image will open in a dialog with a fixed width of 800 pixels:

This image will open in a dialog that takes 90% of the viewport width:

Images that don’t open in dialogs

Add "nodialog" to the title to prevent the dialog transformation:

This is useful for small icons, logos, or decorative images that don’t need to be viewed full-size.

Summary / Details

Collapsible summary/details component can be created by using three ^ characters followed by the type of the layout:

• outlined (default)
• plain
• filled
• filled-outlined

The summary and details are separated by three > characters and the whole component is closed by repeating the three starting characters: ^

When to use this element?

• Question + Answer format for additional details?
• Small amount of additional details to keep hidden from the main text - don’t overuse this like we hidden everything in the old documentation with makes it painful to navigate

Summary ‘outlined’, default option

For this default option you can leave out the type “outlined”

Summary ‘plain’

Summary ‘filled’

Summary ‘filled-outlined’

Summary with icon on left

Summary with custom expand/collapse icons

Summary initially open

Accordion groups (only one open at a time)

Tab groups

Tab groups can be created by using six + characters, followd by the positioning of the tabs:

• top (default)
• start
• end
• bottom

Tabs inside tab groups are created with three + characters. Place multiple tabs inside the tab groups, and close both of them off by using the same amout of + characters they were started with.

When to use the tab group element?

• When you want to show how to do something in different equivalent ways, for example code examples in different languages
• Possibly even for input/output or request/response type of things
• When we have multiple options to choose from and there is a very clear first option, so it does not matter the other options are only hidden behind the tabs, we want to promote the first option, let’s say webhooks vs. polling for example

Tabs aligned ‘top’ (default)

Tabs aligned ‘start’

Tabs aligned ‘end’

Tabs aligned ‘bottom’

Tabs with manual activation (click instead of hover)

Code blocks inside different custom components

Code blocks in Callouts

You can use code blocks inside callouts

class Maventa
  def greet
    puts "Hello from Maventa!"
  end
end

Code blocks in Summary/details

You can use code blocks inside summary/details component too

/// <summary>
/// Set credentials for future API calls
/// </summary>
/// <param name="userApiKey"></param>
/// <param name="companyUuid"></param>
/// <param name="vendorApiKey"></param>
public void SetCredentials(string userApiKey, string companyUuid, string? vendorApiKey = null)
{
    Config.SetConfig(new ConfigValues() { UserApiKey = userApiKey, CompanyUuid = companyUuid, VendorApiKey = vendorApiKey });
}

Code blocks in Tab groups

You can use code blocks inside tab groups too

class Maventa
  def greet
    puts "Hello from Maventa!"
  end
end

Maventa.new.greet

public class Maventa {
    public static void main(String[] args) {
        System.out.println("Hello from Maventa!");
    }
}

using System;

class Maventa {
    static void Main() {
        Console.WriteLine("Hello from Maventa!");
    }
}

class Maventa:
    def greet(self):
        print("Hello from Maventa!")
Maventa().greet()