@zplane-web/craft-licensing

SDK Navigator 

<div id="sdk-navigator-57923-79463" class="sdk-navigator">
    <div class="sdk-navigator__head">
        <div class="sdk-navigator__headline">

            <h1 class="headline" data-headline-size="3"><span class="headline__text"><em class="headline__highlight">Find your SDK</em></span><span class="headline__subhead"><span class="u-hidden-visually">, </span>What should your tool do?</span></h1>
        </div>

        <div class="sdk-navigator__selector">

            <div id="sdk-navigator-57923-79463-selector" class="selector">

                <ul class="selector__items" aria-label="Select an item">
                    <li class="selector__item">
                        <a class="selector__link" href="#">
                            <span class="selector__link-text">Show all</span>
                        </a>
                    </li>
                    <li class="selector__item">
                        <a class="selector__link selector__link--orange" href="#">
                            <span class="selector__link-text">Analysis</span>
                        </a>
                    </li>
                    <li class="selector__item">
                        <a class="selector__link selector__link--yellow" aria-current="true" href="#">
                            <span class="selector__link-text">Broadcast</span>
                        </a>
                    </li>
                    <li class="selector__item">
                        <a class="selector__link selector__link--green" href="#">
                            <span class="selector__link-text">DJ-Tool</span>
                        </a>
                    </li>
                    <li class="selector__item">
                        <a class="selector__link selector__link--steel" href="#">
                            <span class="selector__link-text">Music</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="sdk-navigator__filters">
        <div class="sdk-navigator__filters-label" id="sdk-navigator-57923-79463-filters-label">Filter by</div>

        <ul class="sdk-navigator__filters-links" aria-labelledby="sdk-navigator-57923-79463-filters-label">
            <li class="sdk-navigator__filters-link">

                <a class="pill" href="#"><span class="pill__text u-underline">Time &amp; Pitch</span></a>
            </li>
            <li class="sdk-navigator__filters-link">

                <div class="pill" aria-current="true"><span class="pill__text u-underline">Music analysis</span></div>
            </li>
            <li class="sdk-navigator__filters-link">

                <a class="pill" href="#"><span class="pill__text u-underline">Effects</span></a>
            </li>
            <li class="sdk-navigator__filters-link">

                <a class="link" data-link-type="internal" href="#"><span class="link__icon"><svg class="icon icon--arrow-rotate-left" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-rotate-left"></use>
                        </svg>&#65279;</span><span class="link__text u-underline">Reset</span></a>
            </li>
        </ul>
    </div>

    <div class="sdk-navigator__cards">
        <div class="sdk-navigator__card">

            <div id="sdk-navigator-57923-79463-card-1" class="card">
                <div class="card__inner">
                    <div class="card__icon">
                        <img class="card__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; fill=&#039;none&#039; viewBox=&#039;0 0 96 96&#039;%3E%3Cpath fill=&#039;%23fff&#039; fill-rule=&#039;evenodd&#039; d=&#039;M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z&#039;/%3E%3C/svg%3E
">
                    </div>

                    <div class="card__pills">

                        <div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>

                        <div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>

                        <div class="pill pill--green"><span class="pill__text u-underline">DJ-Tool</span></div>
                    </div>

                    <div class="card__headline">

                        <h2 id="sdk-navigator-57923-79463-card-1-headline" class="headline" data-headline-size="4"><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Time stretching &amp; pitch shifting</span></h2>
                    </div>

                    <div class="card__description">
                        zplane&#039;s ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases

                    </div>

                    <div class="card__button">

                        <a class="button u-overlay-link button--secondary" href="#" aria-describedby="sdk-navigator-57923-79463-card-1-headline">
                            <span class="button__text u-underline">Learn more</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sdk-navigator__card">

            <div id="sdk-navigator-57923-79463-card-2" class="card">
                <div class="card__inner">
                    <div class="card__icon">
                        <img class="card__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; fill=&#039;none&#039; viewBox=&#039;0 0 96 96&#039;%3E%3Cpath fill=&#039;%23fff&#039; fill-rule=&#039;evenodd&#039; d=&#039;M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z&#039;/%3E%3C/svg%3E
">
                    </div>

                    <div class="card__pills">

                        <div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>

                        <div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>

                        <div class="pill pill--green"><span class="pill__text u-underline">DJ-Tool</span></div>
                    </div>

                    <div class="card__headline">

                        <h2 id="sdk-navigator-57923-79463-card-2-headline" class="headline" data-headline-size="4"><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Time stretching &amp; pitch shifting</span></h2>
                    </div>

                    <div class="card__description">
                        zplane&#039;s ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases

                    </div>

                    <div class="card__button">

                        <a class="button u-overlay-link button--secondary" href="#" aria-describedby="sdk-navigator-57923-79463-card-2-headline">
                            <span class="button__text u-underline">Learn more</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sdk-navigator__card">

            <div id="sdk-navigator-57923-79463-card-3" class="card">
                <div class="card__inner">
                    <div class="card__icon">
                        <img class="card__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; fill=&#039;none&#039; viewBox=&#039;0 0 96 96&#039;%3E%3Cpath fill=&#039;%23fff&#039; fill-rule=&#039;evenodd&#039; d=&#039;M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z&#039;/%3E%3C/svg%3E
">
                    </div>

                    <div class="card__pills">

                        <div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>

                        <div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>

                        <div class="pill pill--green"><span class="pill__text u-underline">DJ-Tool</span></div>
                    </div>

                    <div class="card__headline">

                        <h2 id="sdk-navigator-57923-79463-card-3-headline" class="headline" data-headline-size="4"><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Time stretching &amp; pitch shifting</span></h2>
                    </div>

                    <div class="card__description">
                        zplane&#039;s ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases

                    </div>

                    <div class="card__button">

                        <a class="button u-overlay-link button--secondary" href="#" aria-describedby="sdk-navigator-57923-79463-card-3-headline">
                            <span class="button__text u-underline">Learn more</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sdk-navigator__card">

            <div id="sdk-navigator-57923-79463-card-4" class="card">
                <div class="card__inner">
                    <div class="card__icon">
                        <img class="card__icon-inner" width="50" height="50" role="presentation" alt="" src="data:image/svg+xml,%3Csvg xmlns=&#039;http://www.w3.org/2000/svg&#039; fill=&#039;none&#039; viewBox=&#039;0 0 96 96&#039;%3E%3Cpath fill=&#039;%23fff&#039; fill-rule=&#039;evenodd&#039; d=&#039;M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z&#039;/%3E%3C/svg%3E
">
                    </div>

                    <div class="card__pills">

                        <div class="pill pill--orange"><span class="pill__text u-underline">Analysis</span></div>

                        <div class="pill pill--yellow"><span class="pill__text u-underline">Broadcast</span></div>

                        <div class="pill pill--green"><span class="pill__text u-underline">DJ-Tool</span></div>
                    </div>

                    <div class="card__headline">

                        <h2 id="sdk-navigator-57923-79463-card-4-headline" class="headline" data-headline-size="4"><span class="headline__text">Elastique</span><span class="headline__subhead"><span class="u-hidden-visually">, </span>Time stretching &amp; pitch shifting</span></h2>
                    </div>

                    <div class="card__description">
                        zplane&#039;s ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases

                    </div>

                    <div class="card__button">

                        <a class="button u-overlay-link button--secondary" href="#" aria-describedby="sdk-navigator-57923-79463-card-4-headline">
                            <span class="button__text u-underline">Learn more</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set level = level ??? 1 %}
{% set nextLevel = headline|default ? level + 1 : level %}
{% set id = id ??? html_id('sdk-navigator') %}

<div {{ html_attributes({
  id,
  class: 'sdk-navigator',
}, attrs ?? {}) }}>
  {% if headline|default or selector|default %}
    <div class="sdk-navigator__head">
      {% if headline|default %}
        <div class="sdk-navigator__headline">
          {% include '@headline' with headline | merge({
            level: level,
            size: 3,
          }) only %}
        </div>
      {% endif %}

      {% if selector|default %}
        <div class="sdk-navigator__selector">
          {% include '@selector' with {
            id: 'selector' | namespaceInputId(id),
          } | merge(selector) | merge({
            label: false,
          }) only %}
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% if filters|default %}
    {% set filtersLabelId = 'filters-label' | namespaceInputId(id) %}

    <div class="sdk-navigator__filters">
      <div class="sdk-navigator__filters-label" id="{{ filtersLabelId }}">
        {{- 'Filter by' | t('site') -}}
      </div>

      <ul class="sdk-navigator__filters-links" aria-labelledby="{{ filtersLabelId }}">
        {% for filter in filters %}
          <li class="sdk-navigator__filters-link">
            {% if filter.inline|default %}
              {% include '@link' with filter only %}
            {% else %}
              {% include '@pill' with filter only %}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}

  <div class="sdk-navigator__cards">
    {% for card in cards %}
      <div class="sdk-navigator__card">
        {% include '@card' with {
          id: "card-#{loop.index}" | namespaceInputId(id),
        } | merge(card) | merge({
          level: nextLevel,
        }) only %}
      </div>
    {% endfor %}
  </div>
</div>
 
{
  "headline": {
    "text": "__Find your SDK__",
    "subhead": "What should your tool do?"
  },
  "selector": {
    "label": "What should your tool do?",
    "items": [
      {
        "text": "Show all",
        "link": "#"
      },
      {
        "text": "Analysis",
        "link": "#",
        "color": "orange"
      },
      {
        "text": "Broadcast",
        "link": "#",
        "color": "yellow",
        "active": true
      },
      {
        "text": "DJ-Tool",
        "link": "#",
        "color": "green"
      },
      {
        "text": "Music",
        "link": "#",
        "color": "steel"
      }
    ]
  },
  "filters": [
    {
      "text": "Time & Pitch",
      "link": "#"
    },
    {
      "text": "Music analysis",
      "current": true
    },
    {
      "text": "Effects",
      "link": "#"
    },
    {
      "text": "Reset",
      "icon": "arrow-rotate-left",
      "link": "#",
      "inline": true
    }
  ],
  "cards": [
    {
      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
      "pills": [
        {
          "color": "orange",
          "text": "Analysis"
        },
        {
          "color": "yellow",
          "text": "Broadcast"
        },
        {
          "color": "green",
          "text": "DJ-Tool"
        }
      ],
      "headline": {
        "text": "Elastique",
        "subhead": "Time stretching & pitch shifting"
      },
      "description": "zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases\n",
      "button": {
        "link": "#",
        "text": "Learn more"
      }
    },
    {
      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
      "pills": [
        {
          "color": "orange",
          "text": "Analysis"
        },
        {
          "color": "yellow",
          "text": "Broadcast"
        },
        {
          "color": "green",
          "text": "DJ-Tool"
        }
      ],
      "headline": {
        "text": "Elastique",
        "subhead": "Time stretching & pitch shifting"
      },
      "description": "zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases\n",
      "button": {
        "link": "#",
        "text": "Learn more"
      }
    },
    {
      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
      "pills": [
        {
          "color": "orange",
          "text": "Analysis"
        },
        {
          "color": "yellow",
          "text": "Broadcast"
        },
        {
          "color": "green",
          "text": "DJ-Tool"
        }
      ],
      "headline": {
        "text": "Elastique",
        "subhead": "Time stretching & pitch shifting"
      },
      "description": "zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases\n",
      "button": {
        "link": "#",
        "text": "Learn more"
      }
    },
    {
      "icon": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 96 96'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M96 0H0v96h96zM21 29.5a355 355 0 0 0 53 0l3.3-3.3 4.8-4.7-8-5.8c-21.1 2.3-31.8 2-53.1 0zm54.2 36.7a361 361 0 0 0-53 0L20.4 68c-2.2 2.1-3.8 3.7-6.4 6 3.2 2.6 4.9 3.7 8.1 5.9q26.6-3.1 53.1 0zM74 55.9c-21.3-.3-32-.2-53.4 0V42c21.4.2 32 .2 53.4 0z'/%3E%3C/svg%3E\n",
      "pills": [
        {
          "color": "orange",
          "text": "Analysis"
        },
        {
          "color": "yellow",
          "text": "Broadcast"
        },
        {
          "color": "green",
          "text": "DJ-Tool"
        }
      ],
      "headline": {
        "text": "Elastique",
        "subhead": "Time stretching & pitch shifting"
      },
      "description": "zplane's ELASTIQUE family offers three different time-stretching and pitch shifting engines, optimized for different use cases\n",
      "button": {
        "link": "#",
        "text": "Learn more"
      }
    }
  ]
}
  • Content: 
    .sdk-navigator {
  container-name: sdk-navigator;
  container-type: inline-size;
}

.sdk-navigator__head {
  --selector-align: start;

  align-items: center;
  column-gap: var(--grid-gap);
  display: grid;
  row-gap: 3.6rem;

  @container sdk-navigator (inline-size > 70rem) {
    --selector-align: end;

    grid-template-columns: 1fr 1fr;
  }
}

.sdk-navigator__headline {
  --headline-subhead-inset: 2.4rem;
}

.sdk-navigator__filters {
  --link-color: currentColor;
  --link-underline-color: var(--color-gray-300);
  --link-underline-color--engaged: var(--color-gray-900);

  align-items: center;
  color: var(--color-gray-600);
  display: flex;
  gap: 1.6rem;
  justify-content: start;
  margin-block-start: 3.6rem;

  @container sdk-navigator (inline-size > 70rem) {
    justify-content: end;
  }
}

.sdk-navigator__filters-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.sdk-navigator__filters-link:has(.link) {
  margin-inline-start: 0.8rem;
}

.sdk-navigator__cards {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  margin-block-start: 3.6rem;
}
  • URL: /components/raw/sdk-navigator/sdk-navigator.scss
  • Filesystem Path: src/components/4-organisms/sdk-navigator/sdk-navigator.scss
  • Size: 1.2 KB

No notes defined.