Custom theme (replace with client name)

Link Lists: On A Dark Charcoallighter Background 

<div class="link-lists" data-cy="link-lists">
    <h2 class="link-lists__heading" data-cy="link-lists__heading">

    </h2>
    <ul class="link-lists__container">

    </ul>
</div>
 
<div class="link-lists"
    data-cy="link-lists">
    <h2 class="link-lists__heading"
        data-cy="link-lists__heading">
        {{ fields.header }}
    </h2>
    {% if fields.showDescription %}
        <div class="link-lists__description"
             data-cy="link-lists__description">
            {{ fields.description }}
        </div>
    {% endif %}
    <ul class="link-lists__container">
        {{ content }}
    </ul>
</div>
 
{
  "componentSpacing": "large",
  "background": "dark",
  "component": {
    "type": "link-list",
    "lists": [
      {
        "name": "List one name",
        "links": [
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          },
          {
            "type": "internal",
            "text": "Internal link",
            "url": "https://google.com"
          },
          {
            "type": "file",
            "text": "File link",
            "url": "http://www.africau.edu/images/default/sample.pdf"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          }
        ]
      },
      {
        "name": "Long text list",
        "links": [
          {
            "type": "external",
            "text": "External link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
            "url": "https://google.com"
          },
          {
            "type": "internal",
            "text": "Internal link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
            "url": "https://google.com"
          },
          {
            "type": "file",
            "text": "File link with an extraordinarily, unnecessarily, ridiculously, absurdly long name.",
            "url": "http://www.africau.edu/images/default/sample.pdf"
          }
        ]
      },
      {
        "name": "List three name",
        "links": [
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          },
          {
            "type": "internal",
            "text": "Internal link",
            "url": "https://google.com"
          },
          {
            "type": "file",
            "text": "File link",
            "url": "http://www.africau.edu/images/default/sample.pdf"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          }
        ]
      },
      {
        "name": "List four name",
        "links": [
          {
            "type": "internal",
            "text": "Internal link",
            "url": "https://google.com"
          },
          {
            "type": "file",
            "text": "File link",
            "url": "http://www.africau.edu/images/default/sample.pdf"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          },
          {
            "type": "external",
            "text": "External link",
            "url": "https://google.com"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .link-lists
    @extends $componentWithMargin

    &__heading
        @extends $headline1
        margin 16px 0

    &__description
        @extends $bodyLarge
        margin 16px 0

    &__container
        display grid
        grid-template-columns 1fr 1fr
        grid-gap 16px 32px
        list-style none

        +below(640px)
            grid-template-columns 1fr
  • URL: /components/raw/link-lists/link-lists.styl
  • Filesystem Path: patterns/blocks/link-lists/link-lists.styl
  • Size: 371 Bytes

No notes defined.