Gov Design System CE - Templates

Vizitka 

<gov-card class=" gov-card--business">
    <gov-flex gap="s" direction="column">
        <header>
            <h3 class=" gov-card__headline">CENIA</h3>
        </header>
        <p>Česká informační agentura životního prostředí</p>
        <ul class="gov-contact-links gov-list--plain">
            <li>
                <gov-flex gap="s-nudge" align-items="center" responsive="false">
                    <gov-icon type="templates" name="envelope" color="primary" size="m" alt="e-mail:" aria-label="e-mail"></gov-icon>
                    <a href="mailto:sekretariat@cenia.cz">sekretariat@cenia.cz</a>
                </gov-flex>
            </li>
            <li>
                <gov-flex gap="s-nudge" align-items="center" responsive="false">
                    <gov-icon type="templates" name="telephone" color="primary" size="m" alt="tel.:" aria-label="telefon"></gov-icon>
                    <a href="tel:+420797872011">+420 797 872 011</a>
                </gov-flex>
            </li>
            <li>
                <gov-flex gap="s-nudge" align-items="center" responsive="false">
                    <gov-icon type="templates" name="globe2" color="primary" size="m" alt="web:" aria-label="url"></gov-icon>
                    <a href="https://cenia.cz" target="_blank" rel="noreferrer nofollow">cenia.cz</a>
                </gov-flex>
            </li>
        </ul>
    </gov-flex>

</gov-card>
 
{{#> @card }}
    <gov-flex gap="s" direction="column">
        {{#if heading }}
            <header>
                {{ render '@heading' heading }}
            </header>
        {{/if}}
        {{#if text}}
            <p>{{{ text }}}</p>
        {{/if}}
        {{#if contact}}
            {{> @contact }}
        {{/if}}
    </gov-flex>
{{/@card}}
 
{
  "heading": {
    "tag": "h3",
    "name": "CENIA",
    "classes": [
      "gov-card__headline"
    ]
  },
  "text": "Česká informační agentura životního prostředí",
  "classes": [
    "gov-card--business"
  ],
  "contact": [
    {
      "e-mail": {
        "text": "sekretariat@cenia.cz"
      },
      "icon": {
        "type": "templates",
        "name": "envelope",
        "aria-label": "e-mail",
        "alt": "e-mail:",
        "size": "m",
        "color": "primary"
      }
    },
    {
      "phone": {
        "text": "+420 797 872 011",
        "link": "+420797872011"
      },
      "icon": {
        "type": "templates",
        "name": "telephone",
        "aria-label": "telefon",
        "alt": "tel.:",
        "size": "m",
        "color": "primary"
      }
    },
    {
      "web": {
        "text": "cenia.cz",
        "link": "https://cenia.cz"
      },
      "icon": {
        "type": "templates",
        "name": "globe2",
        "aria-label": "url",
        "alt": "web:",
        "size": "m",
        "color": "primary"
      }
    }
  ]
}
  • Content: 
    @import "../../../../styles/mixins";

.gov-card--business {
    border: 1px solid var(--border-subtlest);
    border-radius: var(--corner-radius-m);

    .gov-card__headline {
        @include typography("body-l");
        font-weight: 700;
        color: var(--text-primary-color);
    }

    &-no-border {
        border: none;
    }

    p {
        color: var(--text-tertiary);
    }

    @include mq($from: md) {
        width: fit-content;
        min-width: rem-calc(370);
    }
}
  • URL: /components/raw/card-business/card-business.scss
  • Filesystem Path: src/components/molecules/card/card-business/card-business.scss
  • Size: 487 Bytes

No notes defined.