Connect Dementia Research
Pattern Library
Pattern library home
Pages:
Volunteer sign-up
: Your details
Volunteer sign-up
: Create login details
Volunteer sign-up
: Consent
Volunteer sign-up
: Verify your email address
Volunteer sign-up
: Thank you for creating your account
Volunteer sign-up
: Do you have a diagnosis of dementia?
Volunteer sign-up
: Do you know what your diagnosis is?
Volunteer sign-up
: How would you describe your symptoms?
Volunteer sign-up
: Thank you for registering
Volunteer sign-up
: Thank you for registering as a volunteer
Participant sign-up
: Registration
Dashboard
: Volunteer landing page - registration confirmation
Dashboard
: Volunteer landing page
Dashboard
: Volunteer account settings
Dashboard
: Volunteer change or delete account
Dashboard
: Volunteer profile refresh
Dashboard
: Participant landing page - registration confirmation
Dashboard
: Participant landing page
Dashboard
: Studies
Components:
Accordion
Activity button
Bullet list
Button
Checkbox
Checkbox group
Conditional checkbox group
Content panel
Date picker field
Date field group
Dropdown select
File upload
Heading
Hideable panel
Input field
Masked date field
Message
Page navigation
Paragraph
Postcode lookup
Progress indicator
Prompt/Descriptor
Question
Radio button
Radio button group
Segmented control
Select slider field
Tab panel
Modules:
Page header
User bar
Swatches:
Colours
Fonts
Masked date field
Date
HTML
<div class="form__field input-field input-field--masked-date"> <label>Date <input id="masked-date" name="date-masked-date" type="text" placeholder="dd/mm/yyyy" required /> </label> </div>
SCSS