Vebego Component Library

Text Block 2 grid 

<section class='org-text-block'>
    <div class='vebego-container'>
        <h4 class="atm-heading h4">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

        <div class='md:grid grid-cols-12 gap-8'>
            <div class="colspan-6">
                <div class="atm-paragraph text-md">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                </div>

            </div>
            <div class="colspan-6">
                <div class="atm-paragraph text-md">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                </div>

            </div>
        </div>
    </div>
</section>
 
<section class='org-text-block'>
    <div class='vebego-container'>
            {{#if heading}}
            {{render '@heading' heading merge=true}}
            {{/if}}
        <div class='md:grid grid-cols-12 gap-8'>
            <div class="colspan-6">
            {{#if paragraph}}
            {{render '@paragraph' paragraph merge=true}}
            {{/if}}
            </div>
            <div class="colspan-6">
            {{#if paragraph}}
            {{render '@paragraph' paragraph merge=true}}
            {{/if}}
            </div>
        </div>
    </div>
</section>
 
{
  "heading": {
    "tag": "h4",
    "modifier": "h4",
    "text": "Wat zijn de belangrijkste schoonmaakdoelen?"
  },
  "paragraph": {}
}
  • Content: 
    .org-text-block {
    .mol-title {
        @apply mb-12;
        @apply text-center;
    }

    .umbraco-forms-form {
        @apply ml-auto;
        @apply mr-auto;
    }

    .colspan-4 {
        @apply col-span-4;
    }

    .colspan-6 {
        @apply col-span-6;

        .mol-card-simple.with-image {
            @apply lg:grid grid-cols-2 gap-4;
        }
    }

    .colspan-8 {
        @apply col-span-8 col-start-3;
    }
}
  • URL: /components/raw/text-block-2-grid/text-block-2-grid.css
  • Filesystem Path: src\components\04-organisms\text-block-2-grid\text-block-2-grid.css
  • Size: 461 Bytes

No notes defined.