Vebego Component Library

Download 

<a href="#" class="group mol-download">
    <div class="mol-download--icon">
        <svg class="absolute h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1000 561" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_732_31)">
                <path d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
                <path opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
                <path d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
                <path d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
            </g>
            <defs>
                <linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#501D79" />
                    <stop offset="0.1001" stop-color="#562081" />
                    <stop offset="0.4029" stop-color="#980D7F" />
                    <stop offset="0.5587" stop-color="#871280" />
                    <stop offset="0.8653" stop-color="#5C1E81" />
                    <stop offset="0.9028" stop-color="#562081" />
                    <stop offset="1" stop-color="#501D79" />
                </linearGradient>
                <linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#B92D85" stop-opacity="0.7" />
                    <stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
                    <stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
                    <stop offset="1" stop-color="#F69915" />
                </linearGradient>
                <linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#D62B87" stop-opacity="0.7" />
                    <stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
                    <stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
                    <stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
                    <stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
                </linearGradient>
                <linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#651B82" />
                    <stop offset="0.9974" stop-color="#901080" />
                </linearGradient>
                <clipPath id="clip0_732_31">
                    <rect width="1401" height="561" fill="white" />
                </clipPath>
            </defs>
        </svg>
        <i class="atm-icon  far fa-arrow-down-to-bracket  fa-xl "></i>

    </div>
    <div class="mol-download--content">
        <div class="mol-download--name">
            <h6 class="atm-heading ">Whitepaper Tagesreinigung</h6>

        </div>
        <div class="mol-download--info">
            <div class="atm-paragraph text-md">PDF</div>
            - <div class="atm-paragraph text-md">2.3 MB</div>

        </div>
    </div>
</a>
 
<a href="#" class="group mol-download">
    <div class="mol-download--icon">
      <svg class="absolute h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1000 561" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_732_31)">
          <path 
            d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z"
            fill="url(#paint0_linear_732_31)" />
          <path opacity="0.35"
            d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z"
            fill="#562081" />
          <path 
            d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z"
            fill="url(#paint2_linear_732_31)" />
          <path 
            d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z"
            fill="url(#paint3_linear_732_31)" />
        </g>
        <defs>
          <linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#501D79" />
            <stop offset="0.1001" stop-color="#562081" />
            <stop offset="0.4029" stop-color="#980D7F" />
            <stop offset="0.5587" stop-color="#871280" />
            <stop offset="0.8653" stop-color="#5C1E81" />
            <stop offset="0.9028" stop-color="#562081" />
            <stop offset="1" stop-color="#501D79" />
          </linearGradient>
          <linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#B92D85" stop-opacity="0.7" />
            <stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
            <stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
            <stop offset="1" stop-color="#F69915" />
          </linearGradient>
          <linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#D62B87" stop-opacity="0.7" />
            <stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
            <stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
            <stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
            <stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
          </linearGradient>
          <linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36"
            gradientUnits="userSpaceOnUse">
            <stop stop-color="#651B82" />
            <stop offset="0.9974" stop-color="#901080" />
          </linearGradient>
          <clipPath id="clip0_732_31">
            <rect width="1401" height="561" fill="white" />
          </clipPath>
        </defs>
      </svg>
      {{render "@icon" icon merge=true}}
    </div>
    <div class="mol-download--content">
      <div class="mol-download--name">
        {{render "@heading--h6" name merge=true}}
      </div>
      <div class="mol-download--info">
        {{render "@paragraph" type merge=true}} - {{render "@paragraph" size merge=true}}
      </div>
    </div>
</a>
 
{
  "name": {
    "text": "Whitepaper Tagesreinigung"
  },
  "type": {
    "text": "PDF"
  },
  "size": {
    "text": "2.3 MB"
  },
  "icon": {
    "icon": "fa-arrow-down-to-bracket",
    "style": "far",
    "size": "fa-xl"
  }
}
  • Content: 
    .mol-download {
    @apply border border-primary border-opacity-20 bg-white rounded-lg p-2 flex items-center gap-x-4 hover:border-opacity-100 transition-all w-full;

    &--icon{
        @apply relative aspect-square w-16 lg:w-32 grid place-items-center text-white rounded-md overflow-hidden ;

        .atm-icon{
            @apply relative;
        }
    }

    &--content{
        @apply w-full;
    }

    &--info{
        @apply flex gap-x-2;
    }

    &--name .atm-heading {
        @apply mb-0;
        word-break: break-word;
        hypens: auto;
    }
}
  • URL: /components/raw/download/download.css
  • Filesystem Path: src\components\03-molecules\download\download.css
  • Size: 590 Bytes

No notes defined.