Blocks

Dif­fer­ent <h*> tags, the styl­ing should be pre­served across all sizes.

Badge

Badge with lots of text and less text:

About the author

The Author is lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. Mauris id suscipit mauris, in scelerisque lectus.

About the author

The Author is lorem ipsum dolor sit amet, consectetur adipiscing elit.

Notes, frame

Dif­fer­ent <h*> tags.

Blocks, notes with a link

Dif­fer­ent <h*> tags.

Labels

They should have prop­er ver­tic­al align­ment.

Heading 1 label label

Heading 2 label flat

Heading 3 label flat

Heading 4 label flat

Heading 5 label flat

Heading 6 label flat

Lorem ipsum dolor sit amet, consectetur adipiscing elit. label flat Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices label flat a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Lorem ipsum dolor sit amet, label flat consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra imperdiet tortor sed vehicula.

Tables

Images

Im­age, centered:

Im­age, centered, link:

Im­age, full­width (yes, it should be pixelated):

Im­age, full­width, link (yes, it should be pixelated):

SVG im­age:

SVG im­age, full­width, with link in­side:

SVG im­age, full­width, with link out­side:

Badge:

Badge, with a link:

Figures

Fig­ure, centered:

Fig­ure, centered, im­age link, flat:

Fig­ure, full­width, without de­scrip­tion (yes, it should be pixelated):

Fig­ure, full­width, with a long cap­tion and de­scrip­tion, there should be no un­ne­ces­sary wrap­ping of the text:

Fig­ure with a large im­age but not full­width, should look the same as above, no leak­ing of the im­age out­side of the page:

Fig­ure with a long cap­tion and de­scrip­tion, then just a cap­tion (it should wrap in­stead of ex­tend­ing the bor­der and there should be prop­er pad­ding on bot­tom):

Fig­ures of vary­ing col­ors:

Image grid

Without the link:

With link, without cap­tion, not in­flated:

Without link or cap­tion:

Code in colored notes

and block code

and block code

and block code

and block code

and block code

and block code

and block code

Code fig­ure

A flat code fig­ure:

Some
    code
snippet

A code fig­ure with <pre> in de­scrip­tion. Ac­tiv­at­ing the sec­tion head­er should not af­fect it.

Some
    code
snippet

And a resulting output.

Code fig­ure with a “no­pad” con­sole out­put in­side:

Some
    code
snippet

And a resulting output.

Con­sole fig­ure with a “no­pad” code out­put in­side:

Some
    console
output

And the code that goes out.

Con­sole fig­ure:

Some
    console
output

List with components inside

• A paragraph.

  An info note.
• A button

• Next item.

  Next item next paragraph.

Paragraph after.

Float­ing around

Sim­il­ar to the grid test, but with com­pon­ents.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet.

Float­ing around, in­flated

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta, et aliquam ex condimentum.