All existing components :)

Form component

This is a webform

This is an adresse

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

name 1

street

copenhagen

1234

denmark

1234567889

foobar@saga11.dev

name 2

street

copenhagen

1234

denmark

1234567889

foobar@saga11.dev

name 3

street

copenhagen

1234

denmark

1234567889

foobar@saga11.dev

slider yo

image gallery alternative

this is a gallery with another template

image gallery

lorem

Price table

Small

100

Get this one

Super awesome

Awesome

Normal

200

Get this one

Super Awesome

awesome

Lux

999

Get this one

another thing

super super awesome

Our users say

lorem

Name

title

Everything is awesome

This is a CTA

CTA Text

September 26, 2022

Mon 26 September

10:20 - 10:21

Add to calendar:

Google ics outlook office365 yahoo

This is the frontpage card

The frontpage card that we use for sharing

Saga11

image and text

This is a Collection

lorem ...

All Tags

Saga 11

  <meta name="description" content="saga 11">

  <meta name="keywords" content="11ty saga 11">
<meta name="theme-color" content="#35034c">

  <link href="/themes/grunn/assets/css/style.min.css" rel="stylesheet">


  <title>
    Saga 11 | Saga11 Installation
  </title>

<div class="flex flex-row">

  <a href="/" title="Saga11 Installation" class="w-20 h-20 overflow-hidden inline-flex items-center md:mr-4">
    
    <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">

    <h1 class="sr-only">Saga11 Installation</h1>
  </a>

<div class="flex space-x-4">

  

    
    
      <a href="/styleguide/"
    
    
      class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-gray-500 dark:text-cyan-200 border-transparent"
    
    
    
      target="_blank" rel="noopener"
    

    
  >
        Styleguide
      </a>

    

    
    
      
      <div x-data="{openmenuitem: false}"
        class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-gray-500 dark:text-cyan-200 border-transparent"
        @click="openmenuitem = true"
    >
        <div class="flex items-center">
          <div>Components</div>
          <div class="w-4 h-4 text-gray-400 dark:text-cyan-200 ml-2 mt-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

        <div
          class="absolute z-40 top-20 min-h-40 w-60 bg-white/90 dark:bg-gray-900/90 shadow-lg flex flex-col rounded-md dark:rounded-none"
          x-cloak
          x-show="openmenuitem"
          @mouseover="openmenuitem = true"
          @click.outside="openmenuitem = false"
        >

          
          <a href="/component/"
           class="p-4 text-lg hover:text-cyan-600 hover:bg-cyan-500/10"
           title="<p><em>This is the text for the menu</em></p>

"
>Components

            <a href="https://saga11.dev" class="p-4 text-lg hover:text-cyan-600 hover:bg-cyan-500/10"
             target="_blank" rel="noopener" 
            
          >
              saga11.dev
            </a>
          
        </div>
      </div>

      

    
    
      <a href="/tag/saga11/"
    
    
      aria-current="page" class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-cyan-600 dark:text-cyan-200 border-cyan-500/20"
    
    
    

    
  >
        Tag test
      </a>

    
</div>

</div>


  <div class="hidden md:flex justify-end items-center">

    <a href="/feed.xml" class="hidden md:block w-6 h-6 justify-self-end text-gray-400 dark:text-gray-100 hover:text-orange-500">
      <span class="sr-only">RSS Feed</span>
      <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">

    </a>
  </div>


<div class="flex items-center md:hidden text-2xl text-teal-700 dark:text-teal-100 ">
  <div>Saga11 Installation</div>

</div>


<button
  @click="openmenu = !openmenu"
  class="w-10 block md:hidden space-x-2 focus:outline-none"
  type="button"
  aria-label="toggle mobile menu"
>
  <span class="relative inline-block w-10 h-6">
    <span class="
    block mt-2 absolute w-8 h-1 bg-cyan-700 dark:bg-cyan-400 rounded-md
    transition-all ease-linear duration-75
    before:absolute before:-top-2 before:h-1 before:w-8 before:bg-cyan-600 dark:before:bg-cyan-300 before:rounded-md before:content-[''] before:block
    after:absolute after:top-2 after:h-1 after:w-8 after:bg-cyan-800 dark:after:bg-cyan-500  after:rounded-md after:content-[''] after:block
    "
    :class="openmenu ? 'rotate-45 before:rotate-90 before:translate-y-2 before:bg-gray-700  after:opacity-0' : '' "
    ></span>
  </span>
</button>

  <a href="/styleguide/"
   class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500"
  
>Styleguide</a>




  
  <div x-data="{openmenuitem: false}" class="flex flex-col" @click="openmenuitem = true">

    <div class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 flex flex-row justify-between items-center pr-4">
      <div>Components</div>
      <div class="h-4 w-4" x-show="openmenuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

    <div
    class=""
    x-cloak
    x-show="openmenuitem"
    @mouseover="openmenuitem = true"
    @click.outside="openmenuitem = false"
  >
      
      <a href="/component/" class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 pl-8">Components</a>

      
        <a href="https://saga11.dev" class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 pl-8 ">saga11.dev</a>
      
    </div>
  </div>
  




  <a href="/tag/saga11/"
  aria-current="page" class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 font-bold"
  
>Tag test</a>
</nav>

<article class="mx-auto max-w-7xl">

  <div class="h-8 w-8 "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

Saga 11

<a href="/tag/saga11" class="inline-flex items-center px-2 py-1 rounded text-sm text-red-800 bg-red-100">

  
    <div class="h-4 w-4 mr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

  Saga 11

</a>







<a href="/tag/test" class="inline-flex items-center px-2 py-1 rounded text-sm text-red-800 bg-red-100">

  
    <div class="h-4 w-4 mr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

  test

</a>

bla bal

<article class="shadow border dark:border-none border-gray-100 bg-white dark:bg-gray-900">
  <a href="/post/hello-world/" class="">

    <div class="shadow-lg aspect-video overflow-hidden">
      <picture><source type="image/webp" srcset="/img/t_iglF-hsg-400w.webp 400w, /img/t_iglF-hsg-800w.webp 800w" sizes="(min-width: 800px) 50vw, 100vw"><source type="image/jpeg" srcset="/img/t_iglF-hsg-400w.jpeg 400w, /img/t_iglF-hsg-800w.jpeg 800w" sizes="(min-width: 800px) 50vw, 100vw"><img class="" alt="To the moon" loading="lazy" decoding="async" src="/img/t_iglF-hsg-400w.jpeg" width="800" height="457"></picture>
    </div>

    <div class="p-4">
      <div class="text-2xl text-cyan-800 dark:text-cyan-200">Hello world blogpost</div>
      <div class="mt-2">This is text in a card and used for sharing and teaser on the site. </div>
      <time class="font-bold text-gray-600 dark:text-gray-200 text-right py-4 block">September 19, 2022  13:14</time>
    </div>

  </a>
</article>



<article class="shadow border dark:border-none border-gray-100 bg-white dark:bg-gray-900">
  <a href="/component/" class="">

    <div class="shadow-lg aspect-video overflow-hidden">
      <picture><source type="image/webp" srcset="/img/t_iglF-hsg-400w.webp 400w, /img/t_iglF-hsg-800w.webp 800w" sizes="(min-width: 800px) 50vw, 100vw"><source type="image/jpeg" srcset="/img/t_iglF-hsg-400w.jpeg 400w, /img/t_iglF-hsg-800w.jpeg 800w" sizes="(min-width: 800px) 50vw, 100vw"><img class="" alt="alt text for image" loading="lazy" decoding="async" src="/img/t_iglF-hsg-400w.jpeg" width="800" height="457"></picture>
    </div>

    <div class="p-4">
      <div class="text-2xl text-cyan-800 dark:text-cyan-200">Title from a card</div>
      <div class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
      <time class="font-bold text-gray-600 dark:text-gray-200 text-right py-4 block">April 27, 2023  08:11</time>
    </div>

  </a>
</article>



<article class="shadow border dark:border-none border-gray-100 bg-white dark:bg-gray-900">
  <a href="/" class="">

    <div class="shadow-lg aspect-video overflow-hidden">
      
    </div>

    <div class="p-4">
      <div class="text-2xl text-cyan-800 dark:text-cyan-200">This is the frontpage card </div>
      <div class="mt-2">The frontpage card that we use for sharing</div>
      <time class="font-bold text-gray-600 dark:text-gray-200 text-right py-4 block">April 27, 2023  08:11</time>
    </div>

  </a>
</article>

Grap the RSS

test

  <meta name="description" content="saga 11">

  <meta name="keywords" content="11ty saga 11">
<meta name="theme-color" content="#35034c">

  <link href="/themes/grunn/assets/css/style.min.css" rel="stylesheet">


  <title>
    test | Saga11 Installation
  </title>

<div class="flex flex-row">

  <a href="/" title="Saga11 Installation" class="w-20 h-20 overflow-hidden inline-flex items-center md:mr-4">
    
    <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">

    <h1 class="sr-only">Saga11 Installation</h1>
  </a>

<div class="flex space-x-4">

  

    
    
      <a href="/styleguide/"
    
    
      class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-gray-500 dark:text-cyan-200 border-transparent"
    
    
    
      target="_blank" rel="noopener"
    

    
  >
        Styleguide
      </a>

    

    
    
      
      <div x-data="{openmenuitem: false}"
        class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-gray-500 dark:text-cyan-200 border-transparent"
        @click="openmenuitem = true"
    >
        <div class="flex items-center">
          <div>Components</div>
          <div class="w-4 h-4 text-gray-400 dark:text-cyan-200 ml-2 mt-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

        <div
          class="absolute z-40 top-20 min-h-40 w-60 bg-white/90 dark:bg-gray-900/90 shadow-lg flex flex-col rounded-md dark:rounded-none"
          x-cloak
          x-show="openmenuitem"
          @mouseover="openmenuitem = true"
          @click.outside="openmenuitem = false"
        >

          
          <a href="/component/"
           class="p-4 text-lg hover:text-cyan-600 hover:bg-cyan-500/10"
           title="<p><em>This is the text for the menu</em></p>

"
>Components

            <a href="https://saga11.dev" class="p-4 text-lg hover:text-cyan-600 hover:bg-cyan-500/10"
             target="_blank" rel="noopener" 
            
          >
              saga11.dev
            </a>
          
        </div>
      </div>

      

    
    
      <a href="/tag/saga11/"
    
    
      class="inline-flex items-center text-xl font-bold border-b-4 transition hover:bg-cyan-50/50 dark:hover:bg-gray-900 hover:border-cyan-500/50 text-gray-500 dark:text-cyan-200 border-transparent"
    
    
    

    
  >
        Tag test
      </a>

    
</div>

</div>


  <div class="hidden md:flex justify-end items-center">

    <a href="/feed.xml" class="hidden md:block w-6 h-6 justify-self-end text-gray-400 dark:text-gray-100 hover:text-orange-500">
      <span class="sr-only">RSS Feed</span>
      <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">

    </a>
  </div>


<div class="flex items-center md:hidden text-2xl text-teal-700 dark:text-teal-100 ">
  <div>Saga11 Installation</div>

</div>


<button
  @click="openmenu = !openmenu"
  class="w-10 block md:hidden space-x-2 focus:outline-none"
  type="button"
  aria-label="toggle mobile menu"
>
  <span class="relative inline-block w-10 h-6">
    <span class="
    block mt-2 absolute w-8 h-1 bg-cyan-700 dark:bg-cyan-400 rounded-md
    transition-all ease-linear duration-75
    before:absolute before:-top-2 before:h-1 before:w-8 before:bg-cyan-600 dark:before:bg-cyan-300 before:rounded-md before:content-[''] before:block
    after:absolute after:top-2 after:h-1 after:w-8 after:bg-cyan-800 dark:after:bg-cyan-500  after:rounded-md after:content-[''] after:block
    "
    :class="openmenu ? 'rotate-45 before:rotate-90 before:translate-y-2 before:bg-gray-700  after:opacity-0' : '' "
    ></span>
  </span>
</button>

  <a href="/styleguide/"
   class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500"
  
>Styleguide</a>




  
  <div x-data="{openmenuitem: false}" class="flex flex-col" @click="openmenuitem = true">

    <div class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 flex flex-row justify-between items-center pr-4">
      <div>Components</div>
      <div class="h-4 w-4" x-show="openmenuitem"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

    <div
    class=""
    x-cloak
    x-show="openmenuitem"
    @mouseover="openmenuitem = true"
    @click.outside="openmenuitem = false"
  >
      
      <a href="/component/" class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 pl-8">Components</a>

      
        <a href="https://saga11.dev" class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500 pl-8 ">saga11.dev</a>
      
    </div>
  </div>
  




  <a href="/tag/saga11/"
   class="block h-20 dark:text-cyan-200 flex items-center pl-4 text-lg border-b border-b-gray-200 dark:border-b-gray-500"
  
>Tag test</a>
</nav>

<article class="mx-auto max-w-7xl">

  <div class="h-8 w-8 "><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

test

<a href="/tag/saga11" class="inline-flex items-center px-2 py-1 rounded text-sm text-red-800 bg-red-100">

  
    <div class="h-4 w-4 mr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

  Saga 11

</a>







<a href="/tag/test" class="inline-flex items-center px-2 py-1 rounded text-sm text-red-800 bg-red-100">

  
    <div class="h-4 w-4 mr-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

  test

</a>

This is probably the best description ever of a movie

Space ship movie Space ship people get up from sleeping coffin and have eat. Computer woman find strange noisisng on planet and astonauts go to seeing. astonauts find big elephant man who dead then find to many egg.

h1 Heres a title

h2 Heres a title

h3 Heres a title

this is a small code block

liste item a
liste item b

this is italic and this is bold

<h1>code</h1>

This is an image

this is an image of a Space ship movie Space ship people get up from sleeping coffin and have eat. Computer woman find strange noisisng on planet and astonauts go to seeing. astonauts find big elephant man who dead then find to many egg.

All existing components :)

This is an adresse

name 1

name 2

name 3

image gallery alternative

image gallery

Price table

Small

Normal

Lux

Our users say

Everything is awesome

Links

Download

Feature

This is a CTA

This is the frontpage card

image and text

This is a Collection

Hello World