Single-choice UX

by jorgeluis

HTML

<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/[email protected]/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div id="app">

  <div class="is-flex is-flex-direction-column is-flex-justify-space-between content-wrap">
  
    <div>
      <div class="image-wrap m-t-2 m-b-2">
        <img
          :src="org.logo"
          alt="{{org.companyName}}" />
      </div>

      <p class="m-b-2">
      This device has failed one or more security rules that are required to access your organization’s network and files.
      </p>
      
      <p class="has-text-weight-bold has-text-centered m-b-2">Who is the owner of this device?</p>

      <button
        class="button is-primary is-medium is-flex-direction-column is-fullwidth m-b-2"
        type="button"
        @click="makeRequest('company')">This is a <strong>company-owned</strong> device</button>

      <button
        class="button is-primary is-medium is-fullwidth is-flex-direction-column is-fullwidth m-b-2"
        type="button"
        @click="makeRequest('personal')">This is my <strong>personal</strong> device</button>
    </div>

    <small class="has-text-grey is-size-7">If you think you have reached this page in error, you can safely close the page.</small>
  </div>
  

</div>

CSS

#app {
  padding: 2rem;
}

.content-wrap {
  max-width: 350px;
  margin: 0 auto;
  height: 90vh;
}

.m-t-2 { margin-top: 2rem; }
.m-b-2 { margin-bottom: 2rem; }

.is-flex { display: flex }
.is-flex-direction-column { flex-direction: column; }
.is-flex-justify-space-between { justify-content: space-between; }

.button { height: unset; line-height: 1.2; }
.button strong {
  font-size: 1.2em;
}

JavaScript

const example = {
	data() {
		return {
    	org: {
	      companyName: 'Company Name',
        logo: 'https://assets-global.website-files.com/62d9d95d7903980bb9d54ba1/62f13e4d6a17d567a34ca0a5_wordmark-urchin.png'
      },
			isLoading: false
		}
	},
	methods: {
		makeRequest () {
    	this.isLoading = true

			setTimeout(_ => {
      	this.isLoading = false
      }, 3000)

		}
  }
}

const app = new Vue(example)
app.$mount('#app')