SIA Web Design Library

Country Map: Horizontal Lock Up

No notes defined.

<figure class='c-country-map c-country-map--horizontal'>
    <span class='c-country-map__map'>
        <span class='c-icon c-icon--huge c-icon--map-ba'>
            <img src='../../graphic/maps/map-ba.svg' alt='' />
        </span> </span>
    <figcaption class='c-country-map__content'>
        <span class='c-icon c-icon--flag-ba'>
            <img src='../../graphic/flags/ba.svg' alt='' />
        </span>
        <h1 class='c-heading c-heading--minor'>
            Bosna i Hercegovina
        </h1>
        <p class='c-country-map__localized-name'>Bosnia & Herzegovina</p>
    </figcaption>
</figure>
 
<figure class='{{ get_component_class( 'country-map', display ) }}'>
    <span class='c-country-map__map'>
        {% include '@unit/icon/icon--country-map.twig' with icon|merge( { display: { modifiers: [ 'huge' ] } } ) %}
    </span>
    <figcaption class='c-country-map__content'>
        {% include '@unit/icon/icon--country-flag.twig' with icon %}
        {% if heading %}
            {% include '@unit/heading/heading.twig' with heading|merge( { display: { modifiers: [ 'minor' ] } } ) %}
        {% endif %}
        {% if localized_name %}
            <p class='c-country-map__localized-name'>{{ localized_name }}</p>
        {% endif %}
    </figcaption>
</figure>
 
{
  "heading": {
    "text": "Bosna i Hercegovina"
  },
  "localized_name": "Bosnia & Herzegovina",
  "icon": {
    "iso": "ba"
  },
  "display": {
    "modifiers": [
      "horizontal"
    ]
  }
}