Articles in this section

Test article

Updated

Test 1 - Vertical spacing

The vertical space below 'Note' and the first sentence 'To be used for...' looks as expected.

Note with bullets: 

  Note

  • To be used for technical notes.
  • A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

Note without bullets:

  Note

To be used for technical notes.

A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

 

The vertical space below 'Tip' and the first sentence 'To be used for...' looks as expected.

Tip with bullets:

  Tip

  • To be used for tips.
  • A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

Tip without bullets:

  Tip

To be used for tips.

A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

 

The vertical space below 'Important' and the first sentence 'To be used for...' looks as expected.

Important with bullets:

  Important

  • To be used for disclaimers, warnings, known limitations and known issues.
  • An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

 

Important without bullets:

  Important

To be used for disclaimers, warnings, known limitations and known issues.

An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

 

 

Test 2 - Alignment

  • Bulleted list item 1. End each sentence with a period.
    • Subitem A.
    • Subitem B.
  • Bulleted list item 2.
    The bullet in the table is aligned with the icon, like in the tables above. Also the first word on the second line aligns with the first word on the first line. This is correct.

    Note with bullets:

      Note

    • To be used for technical notes.
    • A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

    Note without bullets:

      Note

    To be used for technical notes.

    A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

    Tip with bullets:

      Tip

    • To be used for tips.
    • A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

    Tip without bullets:

      Tip

    To be used for tips.

    A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

    Important with bullets:

      Important

    • To be used for disclaimers, warnings, known limitations and known issues.
    • An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

    Important without bullets:

      Important

    To be used for disclaimers, warnings, known limitations and known issues.

    An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

     

  • Bulleted list item 3.
  1. Numbered list item 1. End each sentence with a period.
    • Subitem A.
    • Subitem B.
  2. Numbered list item 2.

    Note with bullets:

      Note

    • To be used for technical notes.
    • A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

    Note without bullets:

      Note

    To be used for technical notes.

    A note is typically used to provide additional information, clarification, or context about a specific topic or procedure. It may include background details, explanations, or references to related resources (rely on bullet points in all callouts).

    Tip with bullets:

      Tip

    • To be used for tips.
    • A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

    Tip without bullets:

      Tip

    To be used for tips.

    A tip is a suggestion or recommendation aimed at improving a process, enhancing efficiency, or achieving better results. It often offers practical advice, best practices, or shortcuts for performing a task more effectively (rely on bullet points in all callouts).

    Important with bullets:

      Important

    • To be used for disclaimers, warnings, known limitations and known issues.
    • An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

    Important without bullets:

      Important

    To be used for disclaimers, warnings, known limitations and known issues.

    An important is typically used to highlight critical or essential information. It's mainly to draw attention to key points or critical updates (rely on bullet points in all callouts).

     

  3. Numbered list item 3.

Test 3 - Code block

Code block example. The code below should be shown inside a table, but this is not the case:

<div>
<p>Kind regards</p>
<p>{{UserProfile.DisplayName}}</p>
</div>

As shown in screenshot 1 below, the code block was shown in a (gray) table in the old KB, but in the new style KB (screenshot 2) the code block is shown without the table. The table is shown when the article is in Edit mode, but is missing in a published article (or when you look at the preview):

image (1).png

Another code block:

<div>
<p>Hello world</p>
<p>{{Form.Subject}}</p>
</div>

 

Test 4 - Image border

Another image:

300x100.png

The same as above, but with style="border: none" added to the html:

300x100.png

 

Test 5 - Table

5a. Default table from theme (missing the requested styling)

Title1 Title2 Title3
1 2 3

 

 

5b. Table after doing custom styling (still not matching the expected styling)

Header 1 Header 2 Header 3
Example Example Example
Example Example Example

 

This is the table style expected (it's a screenshot)

 

5c. The table below has no border (in Edit mode). Then in the html this class is used:

<table class="table table--color-header">

Complete html is:

<table class="table table--color-header" style="border-collapse: collapse; height: 66px; width: 100%;">

The result is:

Header 1 Header 2 Header 3 Header 4
aaa bbb ccc ddd
eee fff ggg hhh

5d. Another test:

Header 1 aaa bbb
Header 2 ccc ddd
Header 3 eee fff

 

5e. Another test, but with rounded corners. First row is header:

Month test Savings
Sum 444 $270
January 111 $100
February 222 $80
March 333 $90

5f. First column is header. The cell with $123 has no background color (and if you manually change the background color notice that the upper right corner is not rounded):

January $123
February $100
March $80
April $90
May $270

5g. Another test with first column is header. The cell with $123 is black (because the cell type is set to 'Header cell'):

January $123
February $100
March $80
April $90
May $270

 

5h. Another test with first column is header. In the table below this code is used:

<th style="text-align: left; font-weight: normal; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #FFFFFF; color: #232323; background-color:#E9EAE2">$123</th>

It works! ...but maybe there's a better way to solve it?

January $123
February $100
March $80
April $90
May $270

5i.it works fine with the new theme!

Header a item 1 item 4
Header b item 2 item 5
Header c item 3 item 6

Here is the simple HTML code:

<table class="table table--color-header" style="width: 100%;">
<thead>
<tr>
<th>Header a</th>
<td>item 1</td>
<td>item 4</td>
</tr>
</thead>
<tbody>
<tr>
<th>Header b</th>
<td>item 2</td>
<td>item 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Header c</th>
<td>item 3</td>
<td>item 6</td>
</tr>
</tfoot>
</table>

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.