Settings
Special patterns and chunks of style for the settings area.
Settings
<div class="page">
<div class="wrapper">
<div class="content content-settings">
<div class="settings-header">
<h1>Your Settings</h1>
<div class="settings-navigation">
<ul>
<li class="selected"><a href="#">Account</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Connections</a></li>
</ul>
</div>
</div>
<div class="settings-body">
<div class="fun-form fun-form-stacked fun-form-settings">
<form>
<div class="field">
<label for="email">Email</label>
<div class="field-input more">
<input
type="text"
name="email"
class="input-text"
value="yourname@gmail.com"
autocomplete="email"
/>
</div>
</div>
<div class="field">
<div class="field-input field-input-checkbox">
<label>
<input
type="checkbox"
name="disable_notifications"
value="1"
/>
Disable Email Notifications?
</label>
</div>
</div>
<div class="field">
<div class="field-input field-input-checkbox">
<label>
<input type="checkbox" name="disable_autoplay" value="1" />
Disable Video Autoplay?
</label>
</div>
</div>
<div class="field">
<div class="field-input field-input-checkbox">
<label>
<input type="checkbox" name="show_naked_people" value="1" />
Remove NSFW Filter?
</label>
</div>
</div>
<div class="field">
<div class="field-input field-input-checkbox">
<label>
<input
type="checkbox"
name="show_stats"
value="1"
checked="checked"
/>
Show Stats?
</label>
</div>
</div>
<div class="field field-submit">
<a class="btn btn-primary btn-shadow" href="#">Save This</a>
</div>
</form>
</div>
<div class="settings-subscription-sidebar">
<div class="migration-block">
<h3>MLKSHK Restore Status</h3>
<div class="migration-block-content">
<p>
Your MLKSHK posts are safe and sound and ready to be restored.
Click the button below to start restoring your content.
</p>
<a class="btn btn-primary btn-shadow" href="#">Let’s Go!</a>
</div>
</div>
<div class="member-status-block">
<h3>Membership Status</h3>
<div class="member-status-block-content">
<h4>Your Membership Plan: <a href="#">Single Scoop</a></h4>
<p>Your recent payment history:</p>
<ol class="transaction-list">
<li>
<span class="amount">USD 3.00</span>
charged on <span class="date">June 14, 2020</span>
👍
</li>
<li>
<span class="amount">USD 3.00</span>
charged on <span class="date">June 14, 2019</span>
👍
</li>
<li>
<span class="amount">USD 3.00</span>
charged on <span class="date">June 13, 2019</span>
(failed)
</li>
</ol>
<p></p>
<hr />
<p></p>
<p>
<strong>Current Payment Source</strong><br />
Card type: Visa<br />
Card ending in: 1234<br />
Expiration date: 6/1999
</p>
<button class="btn btn-secondary btn-shadow">
Update Card Details
</button>
<form></form>
<p>
If you’d like to cancel your subscription
<a href="#">you can do so here</a>.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Settings Profile
<div class="page">
<div class="wrapper">
<div class="content content-settings">
<div class="settings-header">
<h1>Your Settings</h1>
<div class="settings-navigation">
<ul>
<li><a href="#">Account</a></li>
<li class="selected">
<a href="#">Profile</a>
</li>
<li><a href="#">Connections</a></li>
</ul>
</div>
</div>
<form>
<div class="settings-body">
<div class="settings-body-sidebar">
<div class="profile-photo">
<div class="profile-photo-media">
<img
class="avatar--img"
src="https://mltshp-cdn.com/static/images/default-icon-venti.svg"
width="100"
height="100"
/><br />
</div>
<div class="profile-photo-meta">
<h3>This is your user photo.</h3>
<h4>Want to change it?</h4>
<input
class="settings-photo-upload"
type="file"
name="photo"
size="10"
/>
</div>
</div>
<div class="info-block">
<h3>Tips for your profile image:</h3>
<p>
Shoot for 100×100 pixels square, it will also be displayed at
48×48 for file pages. (100k maximum size)
</p>
</div>
</div>
<div class="settings-body-content">
<div class="fun-form fun-form-stacked fun-form-border">
<div class="field">
<label for="full_name">Full Name</label>
<div class="field-input">
<input
type="text"
class="input-text"
name="full_name"
maxlength="100"
value="Your Name"
autocomplete="name"
/>
</div>
</div>
<div class="field field-textarea">
<label for="about">About You</label>
<div class="field-input">
<div class="field-input-inner">
<textarea maxlength="255" name="about">
Your description</textarea
>
</div>
</div>
<div class="field-help">255 characters max.</div>
</div>
<div class="field">
<label for="website">Website</label>
<div class="field-input">
<input
type="text"
class="input-text"
name="website"
maxlength="255"
value="http://example.com"
autocomplete="url"
/>
</div>
</div>
<div class="field field-submit">
<a class="btn btn-primary btn-shadow" href="#">Save It!</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Settings Connections
<div class="page">
<div class="wrapper">
<div class="content content-settings">
<div class="settings-header">
<h1>Your Settings</h1>
<div class="settings-navigation">
<ul>
<li><a href="#">Account</a></li>
<li><a href="#">Profile</a></li>
<li class="selected">
<a href="#">Connections</a>
</li>
</ul>
</div>
</div>
<div class="settings-body settings-body-connections">
<h3>
You’ve allowed the following applications access to your account
</h3>
<ul class="apps">
<li>
<h4>
<span class="title">Your sweet MLTSHP-powered App</span>
<span class="by"
>by <a class="user-name" href="#">yourname</a></span
>
</h4>
<p>I bet it does something amazing!</p>
<p>
<a class="disconnect" href="#">Disconnect.</a>
</p>
<form></form>
</li>
<li>
<h4>
<span class="title">Your other incredible MLTSHP App</span>
<span class="by"
>by <a class="user-name" href="#">yourname</a></span
>
</h4>
<p>Even better than the first one!</p>
<p>
<a class="disconnect" href="#">Disconnect.</a>
</p>
<form></form>
</li>
</ul>
</div>
</div>
</div>
</div>