Custom theme (replace with client name)

Link List: On A Dark Charcoallighter Background 

<li class="link-list">
    <h2 class="link-list__list-name" data-cy="link-list__list-name" id=""></h2>
    <ul class="link-list__links" data-cy="link-list__links">

    </ul>
</li>
 
<li class="link-list">
    <h2 class="link-list__list-name"
        data-cy="link-list__list-name"
        id="{{ fields.heading|sanitize }}">{{ fields.heading }}</h2>
    <ul class="link-list__links"
        data-cy="link-list__links">
        {{ content }}
    </ul>
</li>
 
{
  "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-list
    padding-left 0

    &__links
        padding-left 0

    &__list-name
        @extends $headline2
        margin 16px 0
  • URL: /components/raw/link-list/link-list.styl
  • Filesystem Path: patterns/blocks/link-list/link-list.styl
  • Size: 135 Bytes

No notes defined.