Gov Design System CE - Templates

Card 

<gov-card>

</gov-card>
 
<gov-card{{#if direction}} direction="{{ direction }}"{{/if}}
    {{#if url}} href="{{ url }}"{{/if}}
    {{#if heading/id}} aria-labelledby="{{ heading/id }}"{{/if}}
    {{#if classes}} class="{{#each classes}} {{ this }}{{/each}}"{{/if}}
>
    {{#if @partial-block}}{{> @partial-block}}{{/if}}
</gov-card>
 
/* No context defined. */
  • Content: 
    @import "../../../styles/mixins";

.gov-card {
    &__headline {
        @include typography("headline-s");
        color: var(--text-primary-color);
    }
    &__note {
        @include typography("body-s");
        color: var(--text-tertiary);
    }
    &__updated {
        @include typography("body-xs");
        color: var(--text-tertiary);
    }
    &--video &__img{
        position: relative;
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: var(--icon-size-5xl);
            height: var(--icon-size-5xl);
            background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.051 1.99902H8.14C8.962 2.00202 13.127 2.03202 14.25 2.33402C14.5895 2.42619 14.8989 2.60585 15.1472 2.85503C15.3955 3.10422 15.574 3.41421 15.665 3.75402C15.766 4.13402 15.837 4.63702 15.885 5.15602L15.895 5.26002L15.917 5.52002L15.925 5.62402C15.99 6.53802 15.998 7.39402 15.999 7.58102V7.65602C15.998 7.85002 15.989 8.76402 15.917 9.71602L15.909 9.82102L15.9 9.92502C15.85 10.497 15.776 11.065 15.665 11.483C15.574 11.8228 15.3955 12.1328 15.1472 12.382C14.8989 12.6312 14.5895 12.8109 14.25 12.903C13.09 13.215 8.681 13.237 8.07 13.238H7.928C7.619 13.238 6.341 13.232 5.001 13.186L4.831 13.18L4.744 13.176L4.573 13.169L4.402 13.162C3.292 13.113 2.235 13.034 1.748 12.902C1.40863 12.8099 1.09935 12.6304 0.851051 12.3814C0.602753 12.1324 0.424123 11.8227 0.333 11.483C0.222 11.066 0.148 10.497 0.098 9.92502L0.09 9.82002L0.082 9.71602C0.0323634 9.03844 0.00501532 8.35941 0 7.68002L0 7.55702C0.002 7.34202 0.01 6.59902 0.064 5.77902L0.071 5.67602L0.074 5.62402L0.082 5.52002L0.104 5.26002L0.114 5.15602C0.162 4.63702 0.233 4.13302 0.334 3.75402C0.42497 3.41421 0.603532 3.10422 0.85184 2.85503C1.10015 2.60585 1.40951 2.42619 1.749 2.33402C2.236 2.20402 3.293 2.12402 4.403 2.07402L4.573 2.06702L4.745 2.06102L4.831 2.05802L5.002 2.05102C5.95371 2.02043 6.90581 2.00343 7.858 2.00002L8.051 1.99902ZM6.4 5.20902V10.027L10.557 7.61902L6.4 5.20902Z'/%3E%3C/svg%3E" );
            background-repeat: no-repeat;
            background-position: center center;
            filter: brightness(0) saturate(100%) invert(29%) sepia(67%) saturate(1080%) hue-rotate(181deg) brightness(92%) contrast(87%);
        }
    }
    gov-tag, .gov-tag {
        width: fit-content;
    }
}
  • URL: /components/raw/card/card.scss
  • Filesystem Path: src/components/atoms/_card/card.scss
  • Size: 2.5 KB

No notes defined.