To style a page that has only a single form.
☞ Remember
The
<body>(or some other page-size wrapper) should have a background color.
See “Assets” tabexample.cssfile.
<div class="s-form-page">
<form action="" class="s-form s-form--login">
<h3>
<img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg" alt="TACC Logo" />
<span>Log In</span>
</h3>
<p>to continue to the TACC User Portal</p>
<ul style="display:none;">
<li>
Sample <strong>form</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<div class=" has-required">
<label for="username">
User Name
<span class="">Required</span>
</label>
<input name="username" type="text" autocomplete="username" id="username" required>
</div>
<div class=" has-required">
<label for="password">
Password
<span>Required</span>
</label>
<input name="password" type="password" autocomplete="current-password" id="password" required>
</div>
<footer>
<a href="https://accounts.tacc.utexas.edu/register" rel="noreferrer" target="_blank">
Create Account
</a>
<button type="submit">
Log In
</button>
</footer>
<nav>
<p>Having trouble logging in?</p>
<a href="https://example.com" rel="noreferrer" target="_blank">
Reset Password
</a>
<a href="https://example.com" rel="noreferrer" target="_blank">
Account Help
</a>
</nav>
</form>
<script type="module">
import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';
const form = document.querySelector('form');
const selector = ':where(.s-form > ul), :where(.s-form > div > ul)';
form.addEventListener('submit', event => {
event.preventDefault();
console.log({
form,
selector
});
toggleFieldErrors(form, selector);
});
</script>
<hr />
<form action="" class="s-form s-form--login">
<h3>
<figure>
<img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/ut-primary.svg" alt="UT Logo" />
<img src="https://www.tacc.utexas.edu/static/site_cms/img/org_logos/tacc-formal.svg" alt="TACC Logo" />
</figure>
<span>Log In</span>
</h3>
<p>to continue to the TACC User Portal</p>
<ul style="display:none;">
<li>
Sample <strong>form</strong>
error. <a href="https://example.com" target="_blank">Link.</a>
</li>
</ul>
<div class=" has-required">
<label for="username">
User Name
<span class="">Required</span>
</label>
<input name="username" type="text" autocomplete="username" id="username" required>
</div>
<div class=" has-required">
<label for="password">
Password
<span>Required</span>
</label>
<input name="password" type="password" autocomplete="current-password" id="password" required>
</div>
<footer>
<a href="https://accounts.tacc.utexas.edu/register" rel="noreferrer" target="_blank">
Create Account
</a>
<button type="submit">
Log In
</button>
</footer>
<nav>
<p>Having trouble logging in?</p>
<a href="https://example.com" rel="noreferrer" target="_blank">
Reset Password
</a>
<a href="https://example.com" rel="noreferrer" target="_blank">
Account Help
</a>
</nav>
</form>
<script type="module">
import toggleFieldErrors from '../raw/c-form/toggle-field-errors.js';
const form = document.querySelector('form');
const selector = ':where(.s-form > ul), :where(.s-form > div > ul)';
form.addEventListener('submit', event => {
event.preventDefault();
console.log({
form,
selector
});
toggleFieldErrors(form, selector);
});
</script>
<footer>
<a href="https://tacc.utexas.edu/about/security-and-compliance/">
Security
</a>
<a href="https://tacc.utexas.edu/use-tacc/user-policies/">
Policies
</a>
<a href="https://www.nsf.gov/" target="_blank">
Funded by:
<img src="https://cep.tacc.utexas.edu/static/site_cms/img/org_logos/nsf-logo.svg" alt="NSF" title="National Science Foundation" height="50px">
</a>
</footer>
</div>
/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
body > main {
width: unset; /* override core-styles.demo.css */
}
/* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */
body {
background-color: var(--global-color-primary--light);
}
{
"shouldSkipPattern": false,
"bootstrap4Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap4.css"
}
],
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "trumps",
"shouldLoadPortal": true,
"supportStyles": [
"../../assets/trumps/s-form--login.css"
]
}