Link ​

<template>
	<p>Lorem ipsum <a class="cdx-docs-link" href="https://example.com">dolor sic</a> amet.</p>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link {
	.cdx-mixin-link();
}
</style>

<template>
	<p>Lorem ipsum <a class="cdx-docs-link is-underlined" href="#">dolor sic</a> amet.</p>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link {
	.cdx-mixin-link();
}
</style>

<template>
	<p>Lorem ipsum <a class="cdx-docs-link is-underlined" href="#">dolor sic<cdx-icon :icon="cdxIconLinkExternal" /></a> amet.</p>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link {
	.cdx-mixin-link();

	// stylelint-disable-next-line selector-class-pattern
	.cdx-icon {
		color: inherit;
	}
}
</style>

<template>
	<p>Lorem ipsum <a class="cdx-docs-link is-red-link" href="#">dolor sic</a> amet.</p>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link {
	.cdx-mixin-link();
}
</style>

<template>
	<p>Lorem ipsum <a class="cdx-docs-link" href="#">dolor sic</a> amet.</p>
	<p>Lorem ipsum <a class="cdx-docs-link is-underlined" href="#">dolor sic</a> amet.</p>
	<p>Lorem ipsum <a class="cdx-docs-link is-red-link" href="#">dolor sic</a> amet.<p>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link {
	.cdx-mixin-link();
}
</style>

<template>
	<div class="cdx-docs-link-wrapper">
		<p>Lorem ipsum <a href="#">dolor sic</a> amet.</p>
		<p>Lorem ipsum <a class="cdx-docs-link-with-underline" href="#">dolor sic</a> amet.</p>
		<p>Lorem ipsum <a class="cdx-docs-red-link" href="#">dolor sic</a> amet.</p>
	</div>
</template>

<style lang="less">
// Note: you must import the design tokens before importing the link mixin
@import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) '@wikimedia/codex/mixins/link.less';

.cdx-docs-link-wrapper {
	a {
		.cdx-mixin-link-base();
	}

	.cdx-docs-link-with-underline {
		.cdx-mixin-link-underlined();
	}

	.cdx-docs-red-link {
		.cdx-mixin-link-red();
	}
}
</style>