🎈 Styleguide / STYLEGUIDE

Styleguide : grunn
HTML5 Logo Badge
      Eleventy: 2.0.1 |
      Saga11: 0.7.12beta
      mode: prod
      theme: grunn

      url: http://localhost:3791
      gitbranch: main

      root: /opt/build/repo
      source: cli
Default
Colors Size Screen size Page height Image Aspect Font family font size Text & Colors FontMarkup Table icons Nav Pre & Next Nav pages Nav Posts Nav Breadcrumb Navigation SoMe Nav tags Components Text Image Images Images Grid Images slide CTA Download Feature Price Testamonial Link Form Collection Page cards Page card Share Share Calendar Location Header footer edit link 404 page pwa 👉 Styleguide
🤖 file: /content/styleguide/index
👩‍💻 Markup:
<div class="h-full w-full flex flex-col items-center justify-center bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">

  <h1 x-data="{ message: '🎈' }" x-text="message"></h1>

  <div class="text-5xl text-white font-extrabold drop-shadow-lg text-center">
    Styleguide : grunn
  </div>

  <div class="flex space-x-4 mt-4">
    <div class="w-8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <title>HTML5 Logo Badge</title>
  <path fill="#E34F26" d="M71,460 L30,0 481,0 440,460 255,512"/>
  <path fill="#EF652A" d="M256,472 L405,431 440,37 256,37"/>
  <path fill="#EBEBEB" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
  <path fill="#FFF" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>
</div>
    <div class="w-8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
<rect width="630" height="630" fill="#f7df1e"/>
<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
</svg></div>
    <div class="w-8"><?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
	<path fill="#264de4" d="M71.357 460.819L30.272 0h451.456l-41.129 460.746L255.724 512z"/>
	<path fill="#2965f1" d="M405.388 431.408l35.148-393.73H256v435.146z"/>
	<path fill="#ebebeb" d="M124.46 208.59l5.065 56.517H256V208.59zM119.419 150.715H256V94.197H114.281zM256 355.372l-.248.066-62.944-16.996-4.023-45.076h-56.736l7.919 88.741 115.772 32.14.26-.073z"/>
	<path fill="#fff" d="M255.805 208.59v56.517H325.4l-6.56 73.299-63.035 17.013v58.8l115.864-32.112.85-9.549 13.28-148.792 1.38-15.176 10.203-114.393H255.805v56.518h79.639L330.3 208.59z"/>
</svg>
</div>
    <div class="w-8"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 15694 21860">
  <path fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="280" d="M5622 14101c-90 0-135-120-135-361V7789c0-115-23-169-70-162l-431 108c-79 7-118-72-118-237v-517c0-143 43-224 129-242l1422-366c11-3 27-5 48-5 79 0 118 84 118 253v7120c0 241-47 361-140 361zm3683 11c-144 0-268-10-374-30s-216-65-331-135-209-166-283-288-134-293-180-512-70-479-70-781V9604c0-72-20-108-59-108h-334c-90 0-135-86-135-258v-291c0-176 45-264 135-264h334c39 0 59-48 59-145l97-2095c11-190 57-285 140-285h539c90 0 135 95 135 285v2095c0 97 21 145 65 145h687c90 0 135 88 135 264v291c0 172-45 258-135 258h-689c-25 0-42 6-51 19-9 12-13 42-13 89v2779c0 208 13 382 40 520s66 240 118 304 104 108 156 129c52 22 116 32 191 32h382c97 0 145 67 145 199v323c0 147-52 221-156 221zm2067 646c82 0 154-67 215-202s92-326 92-574c0-58-36-257-108-598l-1056-4389c-7-50-11-90-11-119 0-129 27-194 81-194h652c50 0 91 17 124 51s58 103 75 207l700 3705c14 43 23 65 27 65 14 0 22-20 22-59l549-3695c14-108 37-180 67-218s69-57 116-57h452c61 0 92 70 92 210 0 32-4 74-11 124l-959 4993c-75 413-158 729-248 948s-190 368-302 447a776 776 0 01-442 124h-54c-291 0-488-77-592-232-29-32-43-115-43-248 0-266 43-399 129-399 7 0 72 18 194 54 124 38 203 56 239 56zm-8460-647c-90 0-135-120-135-361V7799c0-115-23-169-70-162l-431 108c-79 7-118-72-118-237v-517c0-143 43-224 129-242l1423-367c11-3 27-5 48-5 79 0 118 84 118 253v7120c0 241-47 361-140 361z"/>
</svg>
</div>
    <div class="w-8">    <svg  fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
    </svg>
</div>
  </div>

  <pre class="flex justify-center text-sm text-gray-800 my-4">
      Eleventy: 2.0.1 |
      Saga11: 0.7.12beta
      mode: prod
      theme: grunn

      url: http://localhost:3791
      gitbranch: main

      root: /opt/build/repo
      source: cli

    </pre>

</div>
</main>