<div class="page-wrapper">
<header class="header header--checkout">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<div class="header__buttons">
<a class="
header-button
button
button--icon
button--icon-light
" href="#" aria-label="cartLink">
<svg class="icon header-button__icon" role="img">
<title>cart link</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</a>
</div>
</div>
</div>
</header>
<main class="page-main container" id="maincontent">
<div class="row">
<form class="dashboard-form col-sm-6 dashboard__form">
<h2 class="dashboard-form__title margin-bottom-sm">
Contact Information
</h2>
<fieldset class="
fieldset
">
<div class="input margin-bottom-l required">
<label class="
label
input__label
" for="firstName">
First name
</label>
<input class="input__field " id="firstName" name="firstName" type="" placeholder="First Name">
</div>
<div class="input margin-bottom-l required">
<label class="
label
input__label
" for="lastName">
Last name
</label>
<input class="input__field " id="lastName" name="lastName" type="" placeholder="Last Name">
</div>
<div class="input margin-bottom-l">
<label class="
label
input__label
" for="company">
Company
</label>
<input class="input__field " id="company" name="company" type="" placeholder="Company">
</div>
<div class="input margin-bottom-l">
<label class="
label
input__label
" for="phoneNumber">
Phone Number
</label>
<input class="input__field " id="phoneNumber" name="phoneNumber" type="" placeholder="Phone Number">
</div>
<div class="
dashboard-form__fields
dashboard-form--hidden
">
<h2 class="
heading
dashboard-form__title-form
">
</h2>
</div>
</fieldset>
</form>
<form class="dashboard-form col-sm-6 dashboard__form">
<h2 class="dashboard-form__title margin-bottom-sm">
Address
</h2>
<fieldset class="
fieldset
">
<div class="input margin-bottom-l required">
<label class="
label
input__label
" for="address">
Street Address
</label>
<input class="input__field " id="address" name="address" type="" placeholder="">
</div>
<div class="input margin-bottom-l">
<label class="
label
input__label
" for="address2">
Street Address 2
</label>
<input class="input__field " id="address2" name="address2" type="" placeholder="">
</div>
<div class="input margin-bottom-l">
<label class="
label
input__label
" for="address3">
Street Address vol.3
</label>
<input class="input__field " id="address3" name="address3" type="" placeholder="">
</div>
<div class="input margin-bottom-l required">
<label class="
label
input__label
" for="city">
City
</label>
<input class="input__field " id="city" name="city" type="" placeholder="City">
</div>
<div class="input margin-bottom-l">
<label class="
label
input__label
" for="zipCode">
Zip/Postal Code
</label>
<input class="input__field " id="zipCode" name="zipCode" type="" placeholder="Zip/Postal Code">
</div>
<div class="select dashboard__address margin-bottom-sm">
<label class="
label
" for="field-id">
State/Province
</label>
<select id="field-id" class="select__field " name="field-name">
<option class="" value="example1">
Example State 1
</option>
<option class="" value="example2">
Example state 2
</option>
<option class="" value="example3">
Example state 3
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
<div class="select dashboard__address margin-bottom-sm">
<label class="
label
" for="field-id">
Country
</label>
<select id="field-id" class="select__field " name="field-name">
<option class="" value="example1">
Example country 1
</option>
<option class="" value="example2">
Example country 2
</option>
<option class="" value="example3">
Example country 3
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
<div class="checkbox ">
<input type="checkbox" id="defaultBillingAddress" name="defaultBillingAddress" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="defaultBillingAddress" class="checkbox__label ">
<span class="checkbox__text">
Use as my default billing address
</span>
</label>
</div>
<div class="checkbox ">
<input type="checkbox" id="defaultShippingAddress" name="defaultShippingAddress" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="defaultShippingAddress" class="checkbox__label ">
<span class="checkbox__text">
Use as my default shipping address
</span>
</label>
</div>
<div class="
dashboard-form__fields
dashboard-form--hidden
">
<h2 class="
heading
dashboard-form__title-form
">
</h2>
</div>
</fieldset>
</form>
<div class="actions-group margin-top-l">
<div class="actions-group__handler">
<button class="button actions-group__button" type="button" aria-label="button">
Save address
</button>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="go back">
Go back
</a>
</div>
</div>
</div>
</main>
</div>
<footer class="footer margin-top-xl footer--checkout">
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
</footer>
<div class="page-wrapper">
{{ render '@header--checkout' }}
<main
class="page-main container"
id="maincontent"
>
<div class="row">
{{ render '@dashboard-form' contactInfo }}
{{ render '@dashboard-form' address }}
{{ render '@actions-group' actions }}
</div>
</main>
</div>
{{ render '@footer--checkout' }}
{
"contactInfo": {
"script": false,
"title": {
"tag": "h2",
"class": "dashboard-form__title margin-bottom-sm",
"text": "Contact Information"
},
"class": "col-sm-6 dashboard__form",
"fields": [
{
"input": {
"class": "margin-bottom-l required",
"field": {
"id": "firstName",
"name": "firstName",
"placeholder": "First Name"
},
"label": {
"text": "First name",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l required",
"field": {
"id": "lastName",
"name": "lastName",
"placeholder": "Last Name"
},
"label": {
"text": "Last name",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l",
"field": {
"id": "company",
"name": "company",
"placeholder": "Company"
},
"label": {
"text": "Company",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l",
"field": {
"id": "phoneNumber",
"name": "phoneNumber",
"placeholder": "Phone Number"
},
"label": {
"text": "Phone Number",
"hidden": false
}
}
}
]
},
"address": {
"script": false,
"title": {
"tag": "h2",
"class": "dashboard-form__title margin-bottom-sm",
"text": "Address"
},
"class": "col-sm-6 dashboard__form",
"fields": [
{
"input": {
"class": "margin-bottom-l required",
"field": {
"id": "address",
"name": "address"
},
"label": {
"text": "Street Address",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l",
"field": {
"id": "address2",
"name": "address2"
},
"label": {
"text": "Street Address 2",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l",
"field": {
"id": "address3",
"name": "address3"
},
"label": {
"text": "Street Address vol.3",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l required",
"field": {
"id": "city",
"name": "city",
"placeholder": "City"
},
"label": {
"text": "City",
"hidden": false
}
}
},
{
"input": {
"class": "margin-bottom-l",
"field": {
"id": "zipCode",
"name": "zipCode",
"placeholder": "Zip/Postal Code"
},
"label": {
"text": "Zip/Postal Code",
"hidden": false
}
}
}
],
"selects": [
{
"select": {
"class": "dashboard__address margin-bottom-sm",
"label": {
"text": "State/Province"
},
"options": [
{
"value": "example1",
"text": "Example State 1"
},
{
"value": "example2",
"text": "Example state 2"
},
{
"value": "example3",
"text": "Example state 3"
}
]
}
},
{
"select": {
"class": "dashboard__address margin-bottom-sm",
"label": {
"text": "Country"
},
"options": [
{
"value": "example1",
"text": "Example country 1"
},
{
"value": "example2",
"text": "Example country 2"
},
{
"value": "example3",
"text": "Example country 3"
}
]
}
}
],
"checkboxes": [
{
"checkbox": {
"class": "",
"id": "defaultBillingAddress",
"name": "defaultBillingAddress",
"label": {
"text": "Use as my default billing address"
}
}
},
{
"checkbox": {
"class": "",
"id": "defaultShippingAddress",
"name": "defaultShippingAddress",
"label": {
"text": "Use as my default shipping address"
}
}
}
]
},
"actions": {
"class": "margin-top-l",
"sides": [
{
"action": [
{
"button": {
"text": "Save address",
"class": "actions-group__button"
}
}
]
},
{
"action": [
{
"link": {
"text": "Go back",
"title": "go back",
"class": "actions-group__link"
}
}
]
}
]
}
}
No notes defined.