Cacher is the code snippet organizer for pro developers

{: .alert .alert-block .alert-warning }

Purple Puzzle Icon

{: #puzzle-purple}

Orange GitLab Tanuki

{: #tanuki-orange}

When doing something like this to a heading, it's important give it a custom ID (e.g., {: #puzzle}), otherwise the one automatically created by kramdown will sound very awkward.

The class fa-fw is used when you want to display the icons as a list. They will be aligned, as well as the text right beside them.

Paragraph {: .class .class-1 .class-2}

Paragraph {: #custom-id}

Paragraph {: .class .class-1 #custom-id-1}

Heading

{: .class .class-1 #custom-id-2}

Paragraph {: .class #custom-id-3 style="padding-top:0" key="value"}

Heading {#hello}

List:

• {: .class} List item with custom class
• {:#id} List item with custom id

To a link{: #link}, in-line.

This is a link{:hreflang="es"} in Spanish.

My warning paragraph. {: .alert .alert-warning}