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"
}
],
"bootstrap5Styles": [
{
"isInternal": true,
"layer": "foundation",
"path": "/assets/core-styles.bootstrap5.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"
]
}