DigitalConsumer.FixMyGlass/src/layouts/componentTest/componentTest.vue
Bryan c16a86ddaa CSR-116 Global style updates
Update fonts, headings, spacing, breakpoints
2021-11-02 17:14:38 -04:00

97 lines
2.4 KiB
Vue

<template>
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row g-2">
<radioCard
radioLabel="Windshield"
radioImage="windshield-damage.svg"
altText="Windshield"
groupName="damageKey"
radioID="windshield"
/>
<radioCard
radioLabel="Side Window"
radioImage="side-window-damage.svg"
altText="Side Window"
groupName="damageKey"
radioID="sidewindow"
/>
<radioCard
radioLabel="Back Glass"
radioImage="back-glass-damage.svg"
altText="Back Glass"
groupName="damageKey"
radioID="backglass"
/>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonPrimary
buttonText="Primary"
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<listButton
buttonText="List Button"
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<a href="#">Text Link</a>
</div>
</div>
<div class="row my-2">
<div class="col">
<p>This is default body copy font size/weight</p>
<p class="small">This is small body copy using <code>.small</code> class</p>
<p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
</div>
</div>
<div class="row my-2">
<div class="col">
<h1>h1 Heading</h1>
</div>
</div>
<div class="row my-2">
<div class="col">
<h2>h2 Heading</h2>
</div>
</div>
<div class="row my-2">
<div class="col">
<h3>h3 Heading</h3>
</div>
</div>
<div class="row my-2">
<div class="col">
<h4>h4 Heading</h4>
</div>
</div>
<div class="row my-2">
<div class="col">
<h5>h5 Heading</h5>
</div>
</div>
<div class="row my-2">
<div class="col">
<h6>h6 Heading</h6>
</div>
</div>
</div>
</template>
<script>
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
import radioCard from "@/uxComponents/radioCard/radioCard";
import listButton from "@/uxComponents/listButton/listButton";
export default {
name: "App",
components: {
buttonPrimary,
radioCard,
listButton
},
};
</script>