CSS » Components » Test

Blocks

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

Default block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Default block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Default block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Default block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Primary block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Primary block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Primary block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Primary block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Success block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Success block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Success block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Success block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Warning block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Warning block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Warning block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Warning block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Danger block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Danger block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Danger block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Danger block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Info block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Info block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Info block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Info block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Special block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Special block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Special block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Special block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Dim block h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Dim block h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Dim block h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.
Dim block h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Link. Strong Link.

Badge

Badge with lots of text and less text:

The Author

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.

The Author

About the author

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

Notes, frame

Dif­fer­ent <h*> tags.

Default note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Default note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Default note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Default note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Primary note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Primary note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Primary note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Primary note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Success note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Success note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Success note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Success note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Warning note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Warning note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Warning note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Warning note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Danger note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Danger note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Danger note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Danger note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Info note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Info note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Info note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Info note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Special note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Special note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Special note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Special note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Dim note h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Dim note h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Dim note h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Dim note h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Frame h3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Frame h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Frame h5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.
Frame h6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Link. Strong Link.

Labels

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

Heading 1 label flat

Heading 2 label flat

Heading 3 label flat

Heading 4 label flat

Heading 5 label flat
Heading 6 label flat
Heading 6 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

Flat table (w/o hover effect)
1 Cell Second cell
2 2nd row cell 2nd row 2nd cell
Full-width table
# Heading text Heading text Heading text Heading text Heading text Heading text
1 Cell contents Cell contents Cell contents Cell contents Cell contents Cell contents
2 Cell contents Cell contents Cell contents Cell contents Cell contents Cell contents
3 Cell contents Cell contents Cell contents Cell contents Cell contents Cell contents
Default row Lorem ipsum dolor sit amet Link
Primary row Lorem ipsum dolor sit amet Link
Success row Lorem ipsum dolor sit amet Link
Warning row Lorem ipsum dolor sit amet Link
Danger row Lorem ipsum dolor sit amet Link
Info row Lorem ipsum dolor sit amet Link
Special row Lorem ipsum dolor sit amet Link
Dim row Lorem ipsum dolor sit amet Link
Default cell Link Lorem ipsum dolor sit amet
Primary cell Link Lorem ipsum dolor sit amet
Lorem Success cell Link ipsum dolor sit amet
Lorem ipsum Warning cell Link dolor sit amet
Lorem ipsum dolor Danger cell Link sit amet
Lorem ipsum dolor sit Info cell Link amet
Lorem ipsum dolor sit Special cell Link amet
Lorem ipsum dolor sit amet Dim cell Link
Default header Link Lorem ipsum dolor sit amet
Primary header Link Lorem ipsum dolor sit amet
Lorem Success header Link ipsum dolor sit amet
Lorem ipsum Warning header Link dolor sit amet
Lorem ipsum dolor Danger header Link sit amet
Lorem ipsum dolor sit Info header Link amet
Lorem ipsum dolor sit Special header Link amet
Lorem ipsum dolor sit amet Dim header Link

Table with paragraphs

A paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit.

A second paragraph.

Another.

Another. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit.

A paragraph.

A second paragraph.

“Big” tables

Community
edition
Premium
support
Support Community-based Guaranteed
response time
Commercial use Yes
MIT license
Yes
MIT license
Price

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:

Hello

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

Hello

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

Badge:

Badge, with a link:

Figures

Fig­ure, centered:

A Ship
Photo © The Photogapher

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

A Ship
Photo © The Photogapher

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

A Ship

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:

A Somewhat Lengthy Caption For A Photo
The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On This Page By The Photogapher. All Rights Reserved.

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:

A Somewhat Lengthy Caption For A Photo
The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On This Page By The Photogapher. All Rights Reserved.

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):

A Somewhat Lengthy Caption For A Photo
The Photo Displayed Above Was Kindly Taken And Allowed To Be Used On This Page By The Photogapher. All Rights Reserved.
A Somewhat Lengthy Caption For A Photo

Fig­ures of vary­ing col­ors:

Default figure
Text.
Primary figure
Text.
Success figure
Text.
Warning figure
Text.
Danger figure
Text.
Info figure
Text.
Special figure
Text.
Dim figure
Text.

Image grid

Without the link:

F9.0, 1/250 s, ISO 100
F2.8, 1/1600 s, ISO 100

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

Without link or cap­tion:

Code in colored notes

Inline code in default note.

and block code

Inline code in primary note.

and block code

Inline code in success note.

and block code

Inline code in warning note.

and block code

Inline code in danger note.

and block code

Inline code in info note.

and block code

Inline code in special note.

and block code

Inline code in dim note.

and block code

Code fig­ure

A flat code fig­ure:

Some
    code
snippet
And a resulting output.

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
And a description of that illegal crackery that's done above.

List with components inside

  • A paragraph.

    An info note.
  • Next item.

    Next item next paragraph.

Paragraph after.

Float­ing around

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

Should have the background extended all the way to the sides on small screens.

Should have no spacing on top/sides but on the bottom, extended to the sides on tiny. Lorem ipsum dolor.

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.

Should have spacing on sides but not on the bottom, extended to the sides on tiny. Pellentesque est neque, aliquet nec consectetur.

Float­ing around, in­flated

Should be extended to both sides, have padding on bottom an on sides the same as above. 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.

Should be extended to the right, have padding on bottom an on the right side the same as above. Lorem ipsum dolor.

Should be extended to the left, have padding on bottom an on the outside the same as above. Lorem ipsum dolor.

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.

Parsing strings and iostreams

Call toml::parse() and work with the toml::table you get back, or handle any toml::parse_error that gets thrown:

Try this code on Compiler Explorer

#include <iostream> #include <sstream> #include <toml++/toml.h> using namespace std::string_view_literals; int main() { static constexpr std::string_view some_toml = R"( [library] name = "toml++" authors = ["Mark Gillard <mark.gillard@outlook.com.au>"] cpp = 17 )"sv; try { // parse directly from a string view: { toml::table tbl = toml::parse(some_toml); std::cout << tbl << "\n"; } // parse from a string stream: { std::stringstream ss{ std::string{ some_toml } }; toml::table tbl = toml::parse(ss); std::cout << tbl << "\n"; } } catch (const toml::parse_error& err) { std::cerr << "Parsing failed:\n" << err << "\n"; return 1; } return 0; }
[library]
authors = [ 'Mark Gillard <mark.gillard@outlook.com.au>' ]
cpp = 17
name = 'toml++'

[library]
authors = [ 'Mark Gillard <mark.gillard@outlook.com.au>' ]
cpp = 17
name = 'toml++'

Function documentation

template<typename ElemType, typename... ElemTypes>
toml::array::array(ElemType&& val, ElemTypes && ... vals) explicit

Constructs an array with one or more initial elements.

Template parameters
ElemType One of the TOML node or value types (or a type promotable to one).
ElemTypes One of the TOML node or value types (or a type promotable to one).
Parameters
val The node or value used to initialize element 0.
vals The nodes or values used to initialize elements 1...N.
auto arr = toml::array{ 1, 2.0, "three"sv, toml::array{ 4, 5 } };
std::cout << arr << "\n";
[ 1, 2.0, 'three', [ 4, 5 ] ]

template<typename T>
auto toml::node::value_or(T&& default_value) const noexcept(…)

Gets the raw value contained by this node, or a default.

Template parameters
T Default value type. Must be one of the native TOML value types, or convertible to it.
Parameters
default_value The default value to return if the node wasn't a value, wasn't the correct type, or no conversion was possible.
Returns The underlying value if the node was a value of the matching type (or convertible to it) and within the range of the output type, or the provided default.

Canvases

Image
A canvas being used to draw the memory usage visualization.
auto canvas_begin(string_view id, const vec2& size) -> bool pure virtual noexcept
Requests the beginning of a drawable canvas area.
void canvas_draw_line(const vec2& from, const vec2& to, float width) pure virtual noexcept
Draws a single line segment.
void canvas_draw_rect(const vec2& pos, const vec2& size, float width) pure virtual noexcept
Draws the outline of a rectangle.
void canvas_draw_text(string_view str, const vec2& pos, float wrap_width = -1.0f) pure virtual noexcept
Draws some text.
void canvas_end(bool was_visible) pure virtual noexcept
Signals the end of a canvas.
void canvas_fill_rect(const vec2& pos, const vec2& size) pure virtual noexcept
Fills a rectangle.
void canvas_set_colour(uint32_t abgr) pure virtual noexcept
Sets the current canvas draw colour.