{"id":2534,"date":"2024-09-13T07:31:26","date_gmt":"2024-09-13T07:31:26","guid":{"rendered":"https:\/\/dev.sainformatica.site\/index.php\/styles\/"},"modified":"2026-06-02T16:07:10","modified_gmt":"2026-06-02T14:07:10","slug":"styles","status":"publish","type":"page","link":"https:\/\/dev.sainformatica.site\/more\/styles\/","title":{"rendered":"Global styles"},"content":{"rendered":"\n
\n
\n

Icons<\/h3>\n\n\n\n
\n
<\/path><\/svg> <\/div><\/div>\n\n
<\/path><\/svg> <\/div><\/div>\n\n
<\/path><\/svg> <\/div><\/div><\/div>\n\n\n\n
<\/path><\/svg> <\/div><\/div>\n\n
<\/path><\/svg> <\/div><\/div>\n\n
<\/path><\/svg> <\/div><\/div><\/div>\n\n\n\n
\n

https:\/\/phosphoricons.com\/<\/a><\/p>\n\n\n\n

Regular, Light<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Images<\/h3>\n\n\n\n
\n
\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

https:\/\/www.pexels.com\/<\/a><\/p>\n\n\n\n

https:\/\/unsplash.com\/<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Button global styles<\/h3>\n\n\n\n
\n
Button Style Fill (M size)<\/a><\/div>\n\n\n\n
Button Style Outline (M size)<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style XL<\/a><\/div>\n\n\n\n
Button Style L<\/a><\/div>\n\n\n\n
Button Style M<\/a><\/div>\n\n\n\n
Button Style S<\/a><\/div>\n\n\n\n
Button Style XS<\/a><\/div>\n<\/div>\n\n\n\n
\n
Style Link Text XXL<\/a><\/div>\n\n\n\n
Style Link Text XL<\/a><\/div>\n\n\n\n
Style Link Text L<\/a><\/div>\n\n\n\n
Style Link Text M<\/a><\/div>\n\n\n\n
Style Link Text S<\/a><\/div>\n\n\n\n
Style Link Text XS<\/a><\/div>\n\n\n\n
Style Link Text XXS<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

H1-H6 global styles<\/h3>\n\n\n\n
\n

Title 1<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h1>\n\n\n\n

Title 2<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h2>\n\n\n\n

Title 3<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h3>\n\n\n\n

Title 4<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h4>\n\n\n\n
Title 5<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h5>\n\n\n\n
Title 6<\/mark>
The quick brown fox jumps over the lazy dog.
0123456789 & % $ @ ! ? + – \u2014<\/h6>\n<\/div>\n<\/div>\n\n\n\n
\n

Font size presets<\/h3>\n\n\n\n
\n

XXL<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget.<\/p>\n\n\n\n

XL<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare.<\/p>\n\n\n\n

L<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

M<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

S<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc.<\/p>\n\n\n\n

XS<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc.<\/p>\n\n\n\n

XXS<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n<\/div>\n\n\n\n

\n

Display 1<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Display 2<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Display 3<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 1<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 2<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 3<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 4<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 5<\/mark> Quick brown fox 123<\/p>\n\n\n\n

Title 6<\/mark> Quick brown fox 123<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n

Spacings<\/h3>\n\n\n\n
\n
\n
\n

88-128px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

88-128px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam mauris vitae.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

80-112px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

80-112px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam mauris vitae.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

72-96px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quam cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

72-96px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

64-80px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quas cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

64-80px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

56-64px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quas cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

56-64px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

48-56px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit.<\/p>\n<\/div>\n\n\n\n

\n

48-56px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, congue ut elit porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

40-48px<\/mark><\/strong> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar.<\/p>\n<\/div>\n\n\n\n

\n

40-48px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

36-40px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor.<\/p>\n<\/div>\n\n\n\n

\n

36-40px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin amet.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

32px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin lorem.<\/p>\n<\/div>\n\n\n\n

\n

32px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

28px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

28px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

24px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

24px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

20px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

20px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

16px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

16px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

12px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

12px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

8px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n\n\n\n

\n

8px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

4px<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div>\n\n\n\n

\n

4px<\/mark><\/strong> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Icons https:\/\/phosphoricons.com\/ Regular, Light Images https:\/\/www.pexels.com\/ https:\/\/unsplash.com\/ Button global styles H1-H6 global styles Title 1The quick brown fox jumps over the lazy dog. 0123456789 & % $ @ ! ? + – \u2014 Title 2The quick brown fox jumps over the lazy dog.0123456789 & % $ @ ! ? + – \u2014 Title 3The quick […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8024,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2534","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/pages\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":0,"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/pages\/2534\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/pages\/8024"}],"wp:attachment":[{"href":"https:\/\/dev.sainformatica.site\/wp-json\/wp\/v2\/media?parent=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}