MentorKit Pattern Library

Link Component 

<div class="js-component relative z-0 container component-spacer-margin">
    <div class="w-full max-w-screen-md mx-auto">

        <div class="text-center mb-8 lg:mb-12">
            <h2 class="text-6xl  block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>

            <div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>

        </div>

        <div class="border-grey-400 border rounded-md overflow-hidden">

            <a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300">
                <div class="flex-1">
                    <h3 class="text-lg text-alpha">Site name</h3>
                    <h2 class="text-2xl text-bravo">Page title or description
                </div>
                <div class="flex-shrink-0">
                    <div class="w-8 h-8">
                        <svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
                            <use href="/front-end/sprite.svg#icon-arrow"></use>
                        </svg>
                    </div>
                </div>
            </a>

            <a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300">
                <div class="flex-1">
                    <h3 class="text-lg text-alpha">Site name</h3>
                    <h2 class="text-2xl text-bravo">Page title or description
                </div>
                <div class="flex-shrink-0">
                    <div class="w-8 h-8">
                        <svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
                            <use href="/front-end/sprite.svg#icon-arrow"></use>
                        </svg>
                    </div>
                </div>
            </a>

            <a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300">
                <div class="flex-1">
                    <h3 class="text-lg text-alpha">Site name</h3>
                    <h2 class="text-2xl text-bravo">Page title or description
                </div>
                <div class="flex-shrink-0">
                    <div class="w-8 h-8">
                        <svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
                            <use href="/front-end/sprite.svg#icon-arrow"></use>
                        </svg>
                    </div>
                </div>
            </a>

            <a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300">
                <div class="flex-1">
                    <h3 class="text-lg text-alpha">Site name</h3>
                    <h2 class="text-2xl text-bravo">Page title or description
                </div>
                <div class="flex-shrink-0">
                    <div class="w-8 h-8">
                        <svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
                            <use href="/front-end/sprite.svg#icon-arrow"></use>
                        </svg>
                    </div>
                </div>
            </a>

        </div>
    </div>
</div>
 
<div class="js-component relative z-0 container component-spacer-margin">
    <div class="w-full max-w-screen-md mx-auto">
        {% render "@headline", headline %}
        <div class="border-grey-400 border rounded-md overflow-hidden">
            {% for item in list %}
                <a href="{{item.url}}" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300">
                    <div class="flex-1">
                        <h3 class="text-lg text-alpha">{{item.label}}</h3>
                        <h2 class="text-2xl text-bravo">{{item.heading}}
                    </div>
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8">
                            {% render "@icon", { name: "icon-arrow", modifier: "w-full h-full fill-current text-alpha", ariaHidden: true } %}
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library",
  "headline": {
    "heading": "Lorem ipsum dolor",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  },
  "list": [
    {
      "label": "Site name",
      "heading": "Page title or description",
      "url": "./"
    },
    {
      "label": "Site name",
      "heading": "Page title or description",
      "url": "./"
    },
    {
      "label": "Site name",
      "heading": "Page title or description",
      "url": "./"
    },
    {
      "label": "Site name",
      "heading": "Page title or description",
      "url": "./"
    }
  ]
}

No notes defined.