Gov Design System CE - Templates

Tile 

<gov-grid gap="l" class="gov-tile-grid">
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-tile orientation="vertical" size="s" href="#" no-border>
            <gov-icon type="complex" name="info" slot="icon"></gov-icon>
            <h3 slot="title">Nav Tile Label</h3>
            <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>

        </gov-tile>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-tile orientation="vertical" size="s" href="#" no-border>
            <gov-icon type="complex" name="info" slot="icon"></gov-icon>
            <h3 slot="title">Nav Tile Label</h3>
            <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>

        </gov-tile>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-tile orientation="vertical" size="s" href="#" no-border>
            <gov-icon type="complex" name="info" slot="icon"></gov-icon>
            <h3 slot="title">Nav Tile Label</h3>
            <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>

        </gov-tile>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-tile orientation="vertical" size="s" href="#" no-border>
            <gov-icon type="complex" name="info" slot="icon"></gov-icon>
            <h3 slot="title">Nav Tile Label</h3>
            <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>

        </gov-tile>

    </gov-grid-item>
    <gov-grid-item col-span="12" col-span-lg="4">

        <gov-tile orientation="vertical" size="s" href="#" no-border>
            <gov-icon type="complex" name="info" slot="icon"></gov-icon>
            <h3 slot="title">Nav Tile Label</h3>
            <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>

        </gov-tile>

    </gov-grid-item>
</gov-grid>
 
<gov-grid gap="l" class="gov-tile-grid{{#if classes}}{{#each classes}} {{ this }}{{/each}}{{/if}}">
    {{#each tile}}
        <gov-grid-item
                {{#if col-span/default}}col-span="{{ col-span/default }}"{{/if}}
                {{#if col-span/sm}}col-span-sm="{{ col-span/sm }}"{{/if}}
                {{#if col-span/md}}col-span-md="{{ col-span/md }}"{{/if}}
                {{#if col-span/lg}}col-span-lg="{{ col-span/lg }}"{{/if}}
                {{#if col-span/xl}}col-span-xl="{{ col-span/xl }}"{{/if}}
                {{#if row-span/default}}row-span="{{ row-span/default }}"{{/if}}
                {{#if row-span/sm}}row-span-sm="{{ row-span/sm }}"{{/if}}
                {{#if row-span/md}}row-span-md="{{ row-span/md }}"{{/if}}
                {{#if row-span/lg}}row-span-lg="{{ row-span/lg }}"{{/if}}
                {{#if row-span/xl}}row-span-xl="{{ row-span/xl }}"{{/if}}>

            <gov-tile orientation="{{ orientation }}" size="{{ size }}"{{#if href}} href="{{ href }}"{{/if}}{{#if noborder}} no-border{{/if}}>
                {{ render '@icon' icon }}
                {{ render '@heading' heading }}
                <span>{{ content }}</span>
                {{#if button}}<gov-button color="primary" size="m" type="outlined" href="{{ button/href }}" slot="button">{{ title }}</gov-button>{{/if}}
            </gov-tile>

        </gov-grid-item>
    {{/each}}
</gov-grid>
 
{
  "tile": [
    {
      "heading": {
        "slot": "title",
        "tag": "h3",
        "name": "Nav Tile Label"
      },
      "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...",
      "icon": {
        "slot": "icon",
        "name": "info",
        "type": "complex"
      },
      "orientation": "vertical",
      "size": "s",
      "href": "#",
      "noborder": "true",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "slot": "title",
        "tag": "h3",
        "name": "Nav Tile Label"
      },
      "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...",
      "icon": {
        "slot": "icon",
        "name": "info",
        "type": "complex"
      },
      "orientation": "vertical",
      "size": "s",
      "href": "#",
      "noborder": "true",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "slot": "title",
        "tag": "h3",
        "name": "Nav Tile Label"
      },
      "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...",
      "icon": {
        "slot": "icon",
        "name": "info",
        "type": "complex"
      },
      "orientation": "vertical",
      "size": "s",
      "href": "#",
      "noborder": "true",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "slot": "title",
        "tag": "h3",
        "name": "Nav Tile Label"
      },
      "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...",
      "icon": {
        "slot": "icon",
        "name": "info",
        "type": "complex"
      },
      "orientation": "vertical",
      "size": "s",
      "href": "#",
      "noborder": "true",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    },
    {
      "heading": {
        "slot": "title",
        "tag": "h3",
        "name": "Nav Tile Label"
      },
      "content": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...",
      "icon": {
        "slot": "icon",
        "name": "info",
        "type": "complex"
      },
      "orientation": "vertical",
      "size": "s",
      "href": "#",
      "noborder": "true",
      "col-span": {
        "default": "12",
        "lg": "4"
      }
    }
  ]
}
  • Content: 
    gov-tiles, .gov-tiles {
    gap: var(--spacing-l);
}
  • URL: /components/raw/tiles/tiles.scss
  • Filesystem Path: src/components/molecules/tiles/tiles.scss
  • Size: 52 Bytes

No notes defined.