Component: VCollectionHeader

[obulat]

Description

For the additional search views, we need a new component that will display the view's tag/creator/source and the results count.

API

Props

Name	Type	Description
collection	"tag", "creator", "source"	The kind of additional search view
title	string	The tag, creator name or the source's display name
url	string (optional)	The link to the creator's page or the source
resultsLabel	string	The results count string

Code samples

<div class="flex flex-col gap-y-6 lg:gap-y-8">
    <div class="flex flex-col gap-4 lg:flex-row lg:justify-between">
      <div class="flex items-center gap-x-2">
        <VIcon :name="iconName" :size="isDesktop ? 10 : 6" />
        <h1 class="text-3xl font-semibold leading-6 lg:text-6xl lg:leading-10">
          {{ title }}
        </h1>
      </div>
      <VButton
        v-if="url"
        as="VLink"
        variant="filled-dark"
        size="medium"
        class="label-bold"
        has-icon-end
        show-external-icon
        :external-icon-size="6"
        :href="url"
        >{{ $t(`collection.link.${collection}`) }}</VButton
      >
    </div>
    <p class="caption-regular lg:label-regular text-dark-charcoal-70">
      {{ resultsLabel }}
    </p>
  </div>

Dependencies

New svg icons: institution, person and tag.

References

• Figma: creator desktop and mobile, source desktop and mobile, tag desktop and mobile.