Last active
September 26, 2023 18:03
-
-
Save jesders/33dd971339bc5dec215f39b7143421f6 to your computer and use it in GitHub Desktop.
NCCRT Components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Source+Sans+3:wght@200;300;400;500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,200;8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800;8..60,900&display=swap'); | |
| </style> | |
| <div class="antialiased"> | |
| <div> | |
| <p>Buttons for white bg</p> | |
| <div class="flex gap-10 p-4"> | |
| <!-- Filled --> | |
| <div class="flex flex-col flex-wrap gap-4"> | |
| <button class="inline-block w-full cursor-pointer rounded border border-transparent bg-orange-300 px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-neutral-600 transition hover:bg-orange-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:bg-orange-500 disabled:pointer-events-none disabled:cursor-default disabled:bg-neutral-200 disabled:outline-none sm:w-auto">Button</button> | |
| </div> | |
| <!-- Outline --> | |
| <div class="flex flex-col flex-wrap gap-4"> | |
| <button class="inline-block w-full cursor-pointer rounded border border-orange-300 bg-transparent px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-neutral-600 transition hover:bg-orange-50 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:bg-orange-100 disabled:pointer-events-none disabled:cursor-default disabled:border-neutral-200 disabled:text-neutral-200 disabled:outline-none sm:w-auto">Button</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <p>Buttons for dark bg</p> | |
| <div class="flex gap-10 bg-blue-700 p-4"> | |
| <!-- Filled --> | |
| <div class="flex flex-col flex-wrap gap-4"> | |
| <button class="inline-block w-full cursor-pointer rounded border border-transparent bg-white px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-blue-700 transition hover:border-white hover:bg-transparent hover:text-white focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:bg-blue-300 active:text-white disabled:pointer-events-none disabled:cursor-default disabled:bg-neutral-200 disabled:text-white sm:w-auto">Button</button> | |
| </div> | |
| <!-- Outline --> | |
| <div class="flex flex-col flex-wrap gap-4"> | |
| <button class="inline-block w-full cursor-pointer rounded border border-white bg-transparent px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-white transition hover:bg-white hover:text-blue-700 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:bg-blue-300 active:text-white disabled:pointer-events-none disabled:cursor-default disabled:border-neutral-200 disabled:bg-transparent disabled:text-neutral-200 sm:w-auto">Button</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h1 class="font-poppins text-3xl font-bold leading-tight sm:text-5xl">Heading 1</h1> | |
| <h2 class="font-poppins text-2xl font-bold leading-snug sm:text-3xl sm:leading-tight">Heading 2</h2> | |
| <h3 class="font-poppins text-lg font-bold leading-snug sm:text-2xl">Heading 3</h3> | |
| <h4 class="font-poppins text-base font-bold leading-tight sm:text-lg sm:leading-snug">Heading 4</h4> | |
| <p class="font-sans text-base font-normal leading-tight text-neutral-600">Body 1</p> | |
| <p class="font-sans text-lg font-normal leading-snug text-neutral-600">Body 2</p> | |
| <a class="font-sans text-base font-normal leading-tight text-neutral-600 underline transition hover:text-blue-300 focus-visible:border-transparent focus-visible:text-blue-300 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:text-blue-500 sm:text-lg sm:leading-snug" href="#">Link</a> | |
| <a class="font-sans text-base font-bold leading-tight text-neutral-600 underline transition hover:text-blue-300 focus-visible:border-transparent focus-visible:text-blue-300 focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:text-blue-500 sm:text-lg sm:leading-snug" href="#">Link Bold</a> | |
| </div> | |
| <div class="my-20"></div> | |
| <section class="bg-orange-50 py-12"> | |
| <div class="mx-auto max-w-[1200px] px-4"> | |
| <!-- Content --> | |
| <div class="mb-6"> | |
| <h2 class="mb-4 font-poppins text-2xl font-bold leading-snug sm:mb-6 sm:text-3xl sm:leading-tight">Events & Webinars</h2> | |
| <p class="font-sans text-base font-normal leading-tight text-neutral-600 sm:text-lg sm:leading-snug">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p> | |
| </div> | |
| <!-- Cards --> | |
| <div class="grid grid-cols-1 gap-6 sm:grid-cols-3"> | |
| <!-- Card --> | |
| <div class="rounded border border-neutral-100"> | |
| <img class="h-64 w-full object-cover" src="https://loremflickr.com/342/256" alt="Placeholder Image" /> | |
| <!-- Card: Content --> | |
| <div class="bg-white p-4"> | |
| <!-- Card: Title --> | |
| <h5 class="inline-flex w-full items-center justify-between font-sans text-lg font-bold leading-snug text-blue-300"> | |
| Blue Star Converstation | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" /> | |
| </svg> | |
| </h5> | |
| <div class="mt-2"> | |
| <!-- Card: Date --> | |
| <time class="font-sans text-base font-normal leading-tight text-neutral-600" datetime="">September 11, 2023</time> | |
| <!-- Card: Location --> | |
| <p class="font-sans text-base font-normal leading-tight text-neutral-600">Blue Star Conversation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Buttons --> | |
| <div class="mt-6 flex flex-wrap gap-6 sm:gap-4"> | |
| <a class="inline-block w-full cursor-pointer rounded border border-transparent bg-orange-300 px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-neutral-600 transition hover:bg-orange-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:border-transparent active:bg-orange-500 disabled:pointer-events-none disabled:cursor-default disabled:bg-neutral-200 disabled:outline-none sm:w-auto" href="#" title="Button">All Events & Webinars</a> | |
| <a class="inline-block w-full cursor-pointer rounded border border-orange-300 bg-transparent px-4 pb-2.5 pt-3.5 text-center font-poppins text-base font-bold leading-none text-neutral-600 transition hover:bg-orange-50 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 active:bg-orange-100 disabled:pointer-events-none disabled:cursor-default disabled:border-neutral-200 disabled:text-neutral-200 disabled:outline-none sm:w-auto" href="#" title="Button">Loren Ipsum</a> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="my-20"></div> | |
| <div class="my-20"></div> | |
| <section> | |
| <div class="max-w mx-auto px-4"> | |
| <fieldset> | |
| <legend class="font-sans text-base font-bold leading-tight text-black sm:text-lg sm:leading-snug">Form Section Header</legend> | |
| <!-- Input --> | |
| <div> | |
| <label class="font-sans text-base font-normal leading-tight text-neutral-600" for="input">Input</label> | |
| <div class="mt-1"> | |
| <input class="h-10 w-full rounded border border-neutral-100 font-sans text-base font-normal leading-tight text-neutral-600 placeholder:text-neutral-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 disabled:bg-neutral-50" type="text" name="input" id="input" autocomplete="street-address" placeholder="test" disabled /> | |
| </div> | |
| </div> | |
| <!-- Input w/Icon --> | |
| <div> | |
| <label class="font-sans text-base font-normal leading-tight text-neutral-600" for="input_icon">Input w/icon</label> | |
| <div class="relative mt-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2 top-2.5 h-5 w-5"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> | |
| </svg> | |
| <input class="w-full rounded border border-neutral-100 pl-8 font-sans text-base font-normal leading-tight text-neutral-600 placeholder:text-neutral-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200" type="text" name="input_icon" id="input_icon" autocomplete="street-address" placeholder="test" /> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <fieldset> | |
| <legend class="font-sans text-base font-bold leading-tight text-black sm:text-lg sm:leading-snug">Form Section Header</legend> | |
| <!-- Select --> | |
| <div> | |
| <label class="font-sans text-base font-normal leading-tight text-neutral-600" for="country">Country</label> | |
| <div class="mt-1"> | |
| <select class="h-10 w-full rounded border border-neutral-100 font-sans text-base font-normal leading-tight text-neutral-600 placeholder:text-neutral-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 disabled:bg-neutral-50" id="country" name="country" autocomplete="country-name"> | |
| <option>United States</option> | |
| <option>Canada</option> | |
| <option>Mexico</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Textarea --> | |
| <div> | |
| <label class="font-sans text-base font-normal leading-tight text-neutral-600" for="about">Textarea</label> | |
| <div class="mt-1"> | |
| <textarea class="h-10 h-20 w-full rounded border border-neutral-100 font-sans text-base font-normal leading-tight text-neutral-600 placeholder:text-neutral-400 focus-visible:border-transparent focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-blue-200 disabled:bg-neutral-50" id="about" name="about" placeholder="test"></textarea> | |
| </div> | |
| <p class="font-sans text-sm leading-snug text-neutral-500">Helper text/Error text</p> | |
| </div> | |
| </fieldset> | |
| <!-- Checkboxes --> | |
| <fieldset> | |
| <legend class="font-sans text-base font-bold leading-tight text-black sm:text-lg sm:leading-snug">Form Section Header</legend> | |
| <div class="flex items-center"> | |
| <div class="flex items-center"> | |
| <input id="checkbox_1" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600" /> | |
| <label for="checkbox_1" class="font-sans text-base font-normal leading-tight text-neutral-600">Checkbox title goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| <!-- Radio Buttons --> | |
| <fieldset> | |
| <legend class="font-sans text-base font-bold leading-tight text-black sm:text-lg sm:leading-snug">Form Section Header</legend> | |
| <div class=""> | |
| <div class="flex items-center"> | |
| <input id="radio_1" name="radios" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" /> | |
| <label for="radio_1" class="font-sans text-base font-normal leading-tight text-neutral-600">Radio Option 1</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="radio_2" name="radios" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" /> | |
| <label for="radio_2" class="font-sans text-base font-normal leading-tight text-neutral-600">Radio Option 2</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="radio_3" name="radios" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" /> | |
| <label for="radio_3" class="font-sans text-base font-normal leading-tight text-neutral-600">Radio Option 3</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- NOTES FOR DESIGNERS: Form input border color creates color contrast issues for accessibility --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @type {import('tailwindcss').Config} */ | |
| const defaultTheme = require('tailwindcss/defaultTheme') | |
| module.exports = { | |
| // content: ['./header.php', './footer.php', './index.php', './assets/js/**/*.js'], | |
| theme: { | |
| extend: { | |
| colors: { | |
| blue: { | |
| 100: '#d5f3fb', | |
| 200: '#93c5fd', // Focus visible state | |
| 300: '#2746f8', | |
| 700: '#012169', | |
| }, | |
| neutral: { | |
| 50: '#f6f6f6', | |
| 100: '#e0e0e0', | |
| 200: '#cccccc', | |
| 300: '#a3a3a3', | |
| 400: '#6b6b6b', | |
| 500: '#3d3d3d', | |
| 600: '#1a1a1a', | |
| }, | |
| orange: { | |
| 50: '#fff4eb', | |
| 300: '#ff7500', | |
| 400: '#e16700', | |
| 500: '#bd5b15', | |
| }, | |
| }, | |
| fontSize: { | |
| '3xl': '32px', | |
| }, | |
| fontFamily: { | |
| sans: ['"Source Sans 3"', ...defaultTheme.fontFamily.sans], | |
| serif: ['"Source Serif 4"', ...defaultTheme.fontFamily.serif], | |
| poppins: ['"Poppins"'], | |
| }, | |
| screens: {}, | |
| typography: (theme) => ({ | |
| DEFAULT: { | |
| css: { | |
| h1: {}, | |
| h3: {}, | |
| h2: {}, | |
| h4: {}, | |
| h5: {}, | |
| h6: {}, | |
| a: { | |
| '&:hover': {}, | |
| }, | |
| '> ul': {}, | |
| '> ol': {}, | |
| '> blockquote': {}, | |
| }, | |
| }, | |
| }), | |
| }, | |
| }, | |
| plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')], | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment