Smileys in the content

Smiley

Wink

Sad

Thumbs up

laugh :d

cry

surprised

tongue

sunglases

Markdown basics

Read this webpage https://www.markdownguide.org/cheat-sheet/

this page show how particular styles are rendered on this web and how to use them within articles, etc.

Colors

color:#db2d3c

color:#53626f

color:#2f3944

color:#efefef

color:#243a5e

Headings

### H3 Heading
### H3 Heading as title{.title}
#### H4 Heading
##### H5 Heading
###### H6 Heading

creates

H3 Heading

H3 Heading as title

H4 Heading

H5 Heading
H6 Heading

Links

[Assemble](https://assemble.io) Renders to (hover over the link, there is no tooltip): Assemble

[Assemble](https://assemble.io "Visit us") Renders to (hover over the link, with tooltip): Assemble

Button links

[Big Button](../some-page?classes=button,big)Big Button

[Big Button](../some-page?classes=button,big,center)

Big Button

Forms

Predefined forms:

  • career: Career submission form, contains Name, e-mail, phone, linkedin, position, CV upload, gdpr check. Action: sent email to
  • contact: rendered in every page on the bottom, contains: Name, e-mail, phone, subject, message, gdpr check. Action: create lead in CRM
  • register: Event registration form, contains: Name, e-mail, Phone, Company, gdpr check, 3rd party check. action: create lead in CRM
  • lead: to create full lead in CRM - TBD

Livestorm webinar registration

copy "Integrate registration form" from the webinar settings and put it on the bottom of the article. it will look like:

<iframe width="100%" height="360" frameborder="0" src="https://app.livestorm.co/p/469759f9-2e96-4bf6-ad10-e95bc5e1f98b/form"></iframe>

Integrated forms

use {% include 'forms/form.html.twig' with { form: forms('career') } %} at the end of the article to render the form:

Icons

Use icons from FontAwesome

Normal <i class="far fa-alarm-clock"></i>

Light <i class="fal fa-alarm-clock"></i>

Bold <i class="fas fa-alarm-clock"></i>

Defined size - use rem/em to use relative sizing

<i class="fas fa-alarm-clock" style="font-size: 1em;"></i>

<i class="fas fa-alarm-clock" style="font-size: 2em;"></i>

<i class="fas fa-alarm-clock" style="font-size: 3em;"></i>

<i class="fas fa-alarm-clock" style="font-size: 4em;"></i>

Of course, you can add a color: <i class="fas fa-alarm-clock" style="font-size:4em;color:#db2d3c;"></i>

Or mage it link to some page: [<i class="fas fa-alarm-clock" style="font-size:4em;"></i>](link-to-some-page.html)

Definition list

Apple
: Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
: An American computer company.
Apple
Pomaceous fruit of plants of the genus Malus in the family Rosaceae.
An American computer company.

foot notes

That's some text with a footnote.[^1]

[^1]: And that's the footnote.

That's some text with a footnote.1

Images

Images which need to cover full page width must be at least 1180px wide!

Here are some of the image action, more can be found at here

![ALT Text](image.jpg)

ALT Text

with caption ![ALT Text](image.jpg "Image caption")

ALT Text

lighbox (click on the image) ![ALT Text](image.jpg?lightbox=600,400)

ALT Text

resize exactly to width 300 ![ALT Text](image.jpg?&resize=300)

ALT Text

resize exactly to 300x300 ![ALT Text](image.jpg?&resize=300,300)

ALT Text

resize exactly to 300x300 and crop zoom ![ALT Text](image.jpg?&cropZoom=300,300)

ALT Text

resize exactly to 300x300 and crop zoom and center ![><](image.jpg?&cropZoom=300,300)

><

responsive 80% view width ![ALT Text](image.jpg?&sizes=80vw)

ALT Text

Align image right (float right) ![>](icon.png)>

Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového návrhu vložen smysluplný obsah.

Center Image ![><](icon.png)><

Align Image left (float left) ![<](icon.png)< Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového návrhu vložen smysluplný obsah.

Image gallery for all article images

{% include 'imagegallery.html.twig' %}

Image Gallery for selected images

- ![](image.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image1.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image2.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image3.jpg?lightbox=80vw&cropZoom=200,200)
- ![](image4.jpg?lightbox=80vw&cropZoom=200,200)

Horizontal rules

___: three consecutive underscores
---: three consecutive dashes
***: three consecutive asterisks

creates




Markdown Semantic Text Elements

Bold**Bold**

Italic_Italic_

Deleted~~Deleted~~

Inline Codecode hereInline Code

`Inline Code` `code here` `Inline Code`

HTML Semantic Text Elements

I18N<abbr>I18N</abbr>

Citation<cite>Citation</cite>

Ctrl + S<kbd>Ctrl + S</kbd>

TextSuperscriptedText<sup>Superscripted</sup>

TextSubscriptedText<sub>Subscripted</sub>

Underlined<u>Underlined</u>

Highlighted<mark>Highlighted</mark>

<time>20:14</time>

x = y + 2<var>x = y + 2</var>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

Bill Gates

> The advance of technology is based on making it fit in so that you don't really even notice it,
> so it's part of everyday life.
>
> <cite>Bill Gates</cite>

Unordered List

A list of items in which the order of the items does not explicitly matter.

You may use any of the following symbols to denote bullets for each list item:

* valid bullet
- valid bullet
+ valid bullet
  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
* list item 1
* list item 2
    * list item 2.1
    * list item 2.2
    * list item 2.3
* list item 3

Ordered List

  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
1. list item 1
1. list item 2
    1. list item 2.1
    1. list item 2.2
    1. list item 2.3
1. list item 3

Table

NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
| Name                        | Genre                         | Release date         |
| --------------------------- | ----------------------------- | -------------------- |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |

Left, Right aligned, centered text

Adding a colon on the right side of the dashes below any heading will right align text for that column.

NameGenreRelease date
The Shawshank RedemptionCrime, Drama14 October 1994
The GodfatherCrime, Drama24 March 1972
Schindler's ListBiography, Drama, History4 February 1994
Se7enCrime, Drama, Mystery22 September 1995
| Name                        | Genre                         | Release date         |
| :-------------------------- | :---------------------------: | -------------------: |
| The Shawshank Redemption    | Crime, Drama                  | 14 October 1994      |
| The Godfather               | Crime, Drama                  | 24 March 1972        |
| Schindler's List            | Biography, Drama, History     | 4 February 1994      |
| Se7en                       | Crime, Drama, Mystery         | 22 September 1995    |

Notices

The notices styles are actually provided by the markdown-notices plugin but are useful enough to include here:

This is a warning notification

This is a error notification

This is a default notification

This is a success notification

! This is a warning notification
!! This is a error notification
!!! This is a default notification
!!!! This is a success notification

Block code "fences"

Use "fences" ``` to block in multiple lines of code with a language attribute

```html
```powershell
```markdown
Sample text here...

  1. And that's the footnote. 

Sdílej v médiích

Kontakt

Nenašli jste, co hledáte? Pošlete nám zprávu a zůstaneme s vámi ve spojení.

* Vyžadované pole

Osobní data použijeme pouze pro vypracování odpovědi na dotaz. Pravidla zpracování osobních údajů