Card ​

<template>
	<cdx-card url="https://www.example.com">
		<template #title>
			Card title
		</template>
		<template #description>
			Description
		</template>
	</cdx-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard } from '@wikimedia/codex';

export default defineComponent( {
	name: 'CardWithLink',
	components: { CdxCard }
} );
</script>

<template>
	<cdx-card :icon="cdxIconRobot">
		<template #title>
			Card title
		</template>
		<template #description>
			Description
		</template>
	</cdx-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard } from '@wikimedia/codex';
import { cdxIconRobot } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'CardWithIcon',
	components: { CdxCard },
	setup() {
		return {
			cdxIconRobot
		};
	}
} );
</script>

<template>
	<cdx-card :thumbnail="thumbnailData">
		<template #title>
			Card title
		</template>
		<template #description>
			Description
		</template>
	</cdx-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard, Thumbnail } from '@wikimedia/codex';

const thumbnailData: Thumbnail = {
	width: 200,
	height: 150,
	url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg/200px-64_365_Color_Macro_%285498808099%29.jpg'
};

export default defineComponent( {
	name: 'CardWithThumbnail',
	components: { CdxCard },
	setup() {
		return {
			thumbnailData
		};
	}
} );
</script>

<template>
	<cdx-card :thumbnail="thumbnailData">
		<template #title>
			Card title
		</template>
	</cdx-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard, Thumbnail } from '@wikimedia/codex';

const thumbnailData: Thumbnail = {
	width: 200,
	height: 180,
	url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/200px-Juvenile_Ragdoll.jpg'
};

export default defineComponent( {
	name: 'CardWithThumbnailTitleOnly',
	components: { CdxCard },
	setup() {
		return {
			thumbnailData
		};
	}
} );
</script>

<template>
	<div class="cdx-docs-card-group-with-thumbnails">
		<p>Nearby Pages</p>
		<cdx-card
			v-for="card in cards"
			:key="card.pageid"
			class="cdx-docs-card-group-with-thumbnails__card"
			:url="card.url"
			:force-thumbnail="true"
			:thumbnail="card.thumbnail"
		>
			<template #title>
				{{ card.title }}
			</template>
			<template #description>
				{{ card.description }}
			</template>
			<template #supporting-text>
				<cdx-icon :icon="cdxIconMapPin" size="small" /> Distance: {{ card.distance }}
			</template>
		</cdx-card>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard, CdxIcon } from '@wikimedia/codex';
import { cdxIconMapPin } from '@wikimedia/codex-icons';

// Simulation of results from a MediaWiki API.
const cards = [
	{
		pageid: 3613583,
		url: 'https://en.wikipedia.org/wiki/Golden_Gate_National_Recreation_Area',
		title: 'Golden Gate National Recreation Area',
		description: 'U.S. National Recreation Area surrounding San Francisco Bay Area',
		thumbnail: {
			width: 150,
			height: 113,
			url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Golden_Gate_-_Lands_End_-_Point_Lobos_2009.jpg/150px-Golden_Gate_-_Lands_End_-_Point_Lobos_2009.jpg'
		},
		distance: '170m'
	},
	{
		pageid: 176931,
		url: 'https://en.wikipedia.org/wiki/Internet_Archive',
		title: 'Internet Archive',
		description: 'American non-profit organization providing archives of digital media since 1996',
		thumbnail: {
			width: 150,
			height: 146,
			url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Internet_Archive_logo_and_wordmark.svg/150px-Internet_Archive_logo_and_wordmark.svg.png'
		},
		distance: '300m'
	},
	{
		pageid: 11002203,
		url: 'https://en.wikipedia.org/wiki/Green_Apple_Books_%26_Music',
		title: 'Green Apple Books & Music',
		description: 'Bookstore in San Francisco',
		distance: '350m'
	}
];

export default defineComponent( {
	name: 'CardGroupWithThumbnails',
	components: { CdxCard, CdxIcon },
	setup() {
		return {
			cards,
			cdxIconMapPin
		};
	}
} );
</script>

<style lang="less">
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';

.cdx-docs-card-group-with-thumbnails {
	p {
		margin-top: 0;
		font-weight: @font-weight-bold;
	}

	// The application implementing Cards must handle Card group layout styles.
	&__card {
		margin-bottom: @spacing-100;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>

<template>
	<cdx-card :thumbnail="thumbnailData">
		<template #title>
			Card titles should be fairly short, but will wrap onto a new line if
			the text becomes long enough
		</template>
		<template #description>
			Description text will commonly be longer than a single line, and
			will wrap onto new lines, expanding the height of the Card to
			accommodate the content.
		</template>
		<template #supporting-text>
			<cdx-icon :icon="cdxIconWatchlist" size="small" />
			Supporting text should also be kept short, but if it is long, it
			will wrap onto a new line like the rest of the Card content.
		</template>
	</cdx-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxCard, CdxIcon } from '@wikimedia/codex';
import { cdxIconWatchlist } from '@wikimedia/codex-icons';

const thumbnailData = {
	url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/200px-FullMoon2010.jpg'
};

export default defineComponent( {
	name: 'CardMaximum',
	components: { CdxCard, CdxIcon },
	setup() {
		return {
			thumbnailData,
			cdxIconWatchlist
		};
	}
} );
</script>