Divider

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-action-group appearance="fieldset">
	<vwc-button icon="transfer-line"></vwc-button>
	<vwc-divider orientation="vertical"></vwc-divider>
	<vwc-button icon="compose-line"></vwc-button>
</vwc-action-group>

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-card class="card">
	<vwc-layout column-basis="block" gutters="small" slot="main">
		Choose the button you like best in this card :)

		<vwc-divider></vwc-divider>

		<div class="demo-footer" slot="footer">
			<vwc-button label="Cancel" appearance="outlined"></vwc-button>
			<vwc-button label="Submit" appearance="filled"></vwc-button>
		</div>
	</vwc-layout>
</vwc-card>

<style>
	.card {
		width: 400px;
	}
	.demo-footer {
		display: flex;
		column-gap: 8px;
		justify-content: flex-end;
	}
</style>

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-layout class="layout">
	<vwc-divider role="presentation" class="divider"></vwc-divider>
	More Info
	<vwc-divider role="presentation" class="divider"></vwc-divider>
</vwc-layout>

<style>
	.layout {
		--layout-grid-template-columns: 1fr auto 1fr;
	}

	.divider {
		display: flex;
		align-items: center;
	}
</style>