Vebego Component Library

Headline Block 

<div class="org-headline-block">
    <div class="vebego-container">
        <h2 class="atm-heading ">The quick brown fox jumps over the lazy dog</h2>

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

        <a class="atm-button atm-button-primary  button-md icon-right   ">
            <div class="button-content-wrapper">
                <span class="button-content">
                    <span>Button</span>
                    <i class="atm-icon  fal fa-arrow-right   "></i>

                </span>
            </div>
            <span class="button-triangle"></span>
        </a>

        <a class="atm-button atm-button-secondary button-md ">
            <div class="button-content-wrapper">
                <span class="button-content">
                    <span>Lees de klantcase</span>
                    <i class="atm-icon  far fa-long-arrow-right   "></i>

                    <span class="button-underline"></span>
                </span>
            </div>
        </a>

    </div>
</div>
 
<div class="org-headline-block">
  <div class="vebego-container">
    {{ render "@heading" heading merge=true }}
    {{ render "@paragraph" }}
    {{ render '@button-primary--icon-md' merge=true }}
    {{ render '@button-secondary' merge=true }}
  </div>
</div>
 
{
  "heading": {
    "tag": "h2"
  }
}
  • Content: 
    .org-headline-block {
    @apply text-center;

    .atm-heading {
        @apply text-secondary-col-1;
    }

    .atm-paragraph > p {
        @apply m-auto mb-4 max-w-prose;
    }

    .atm-button {
        @apply m-0;
    }
}
  • URL: /components/raw/headline-block/headline-block.css
  • Filesystem Path: src\components\04-organisms\headline-block\headline-block.css
  • Size: 243 Bytes

No notes defined.