- --pico-timeline-line-color: var(--pico-primary-background);
- --pico-timeline-dot-background-color: var(--pico-primary-inverse);
- --pico-timeline-dot-border-color: var(--pico-primary-background);
- --pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
+
Show the code:
+
+
<div role="tablist">
+ <!-- Tab One -->
+ <button id="tabone" role="tab" tabindex="0" aria-selected="true" aria-controls="panel1">
+ Tab One
+ </button>
+ <div id="panel1" role="tabpanel" aria-labelledby="tabone" tabindex="0">
+ <h1>Tab One Content</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
+ </div>
+
+ <!-- Tab Two -->
+ <button id="tabtwo" role="tab" aria-selected="false" aria-controls="panel2" tabindex="-1">
+ Tab Two
+ </button>
+ <div id="panel2" role="tabpanel" aria-labelledby="tabtwo" hidden>
+ <h1>Tab Two Content</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
+ </div>
+
+ <!-- Tab Three -->
+ <button id="tabthree" role="tab" aria-selected="false" aria-controls="panel3" tabindex="-1">
+ Tab Three
+ </button>
+ <div id="panel3" role="tabpanel" aria-labelledby="tabthree" hidden>
+ <h1>Tab Three Content</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
+ </div>
+</div>
-
-
-
-
-
- Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
-
-
-
-
-
- Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
-
-
-
-
-
- Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
-
-
-
-
-
- Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ Tooltips are now dark background be default for light and dark theme.
+
+ I also wanted to remove the dotted line on input fileds when they are contained within the tooltip element,
+ so that is why this example has the input field with the tooltip on the <label>
+ wrapper.
+
+
+
+
+
+
+ Floating Labels
+ Classless!
+
+ For floating labels to work, you need to add the role="form" attribute to a
+ <section> tag, ensure you have a placeholder="example" attribute on your
+ input or textarea tags, and that placeholder value needs to be the same value that is used within the label
+ tag, which would go after your form element..
+
+
+
+
+
+
+ Show The Code
+
+
<section role="form">
+ <input type="email" id="fl-email-ele" placeholder="Email" aria-required="true"
+ aria-labelledby="fl-email">
+ <label for="fl-email-ele" id="fl-email">Email</label>
+</section>
+<section role="form">
+ <select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
+ <option selected disabled value="">Topic</option>
+ <option>General</option>
+ <option>Support</option>
+ <option>Feedback</option>
+ </select>
+ <label for="fl-topic-ele" id="fl-topic">Topic</label>
+</section>
+<section role="form">
+ <textarea id="fl-message-ele" placeholder="Message" aria-required="true"
+ aria-labelledby="fl-message"></textarea>
+ <label for="fl-message-ele" id="fl-message">Message</label>
+</section>
+
+
+
+
+
+
+
+
+
+
+
+ Group
+ Classless and no JavaScript!
+
+ I wanted to add the label tah to have an input group kind of thing going on.
+
+
+
+
+
+
+
+
+ Similar to Bootstrap 5.3.3,
+ with the responsive .col-*COL#*, .col-*BREAKPOINT*-*COL#*,
+ .offset-*COL#*, .offset-*BREAKPOINT*-*COL#*.
+
+
+ .row has a max width set to the viewport of your xl viewport (1300px by default)
+
+ .row-fluid max width is 100%.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Columns with offsets defined by breakpoints
+
+ When defining multiple .col-*-* on the same element, the order your put the classes on the
+ element matter.
+
+
+
+
+
col-4, offset-8, col-md-6, offset-md-6
+
+
+
+
col-5, offset-1, col-md-11
+
+
+
+
col-3, offset-9, col-md-6, offset-md-6
+
+
+
+
col-3 col-md-12 col-lg-6
+
+
+
col-3 col-md-12 col-lg-6
+
+
+
col-4 col-md-6 col-lg-3
+
+
+
col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10
+
+
+
+
+
+
+
+
+
+ You can add .align-start (default), .align-center or .align-end to
+ your .row or .row-fluid element to align the containing elements to the top,
+ middle, or bottom.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click/Tap everywhere else to close
+
+
+
+
+ Some Feedback Message With Close Button
+
+
+
+
+
+
+
+
+
+ Accordion 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam,
+ tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae
+ tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
+ lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar
+ mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
+ amet, congue turpis.
+
+
+
+ Accordion 2
+
+ - Vestibulum id elit quis massa interdum sodales.
+ - Nunc quis eros vel odio pretium tincidunt nec quis neque.
+ - Quisque sed eros non eros ornare elementum.
+ - Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
+
+
+
+
+
+
+
+
+ Timeline
+
+
+ View Custom CSS
+
+
--pico-timeline-line-color: var(--pico-primary-background);
+--pico-timeline-dot-background-color: var(--pico-primary-inverse);
+--pico-timeline-dot-border-color: var(--pico-primary-background);
+--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
+ mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
+ primis ea eam.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
+ mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
+ primis ea eam.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
+ mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
+ primis ea eam.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea
+ mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto
+ primis ea eam.
+
+
+
+
+
+
DO NOT USE THE FOLLOWING
+
All CSS and JavaScript have been removed for the following examples, so you will only be seeing the raw examples, without styling
+
+ Show Old Tabs
+ The tabs below will be removed in a future version.
+
+
+
+ Tabs section[role="region"]
+ DOES NOT WORK IN CHROME
+
+ Information
+
+ - I wanted this to work without javascript
+ - I wanted to use the
<details> and <summary> tags.
+
+ Grips
+
+ - I would have liked to use the
role attribute values tablist,
+ tab,
+ and tabpanel but the w3 specs says we cant use roles on <details> and <summary> tags.
+
+ <section> in theory has a default role attribute value of
+ region, though not confirmed, or applied when we are using it for our CSS. So I went with
+ the
+ role="region" attribute to help with selecting the correct element with CSS, classless and
+ no
+ JavaScript!
+
+
+ Example Tabs with no JavaScript:
+
+
+
+ Tab 1
+
+
Content for Tab 1
+
Content for Tab 1
+
+
+ Tab 2
+
+
Just a random table
+
+
+ | row 1 col 1 |
+ row 1 col 2 |
+ row 1 col 3 |
+
+
+ | row 2 col 1 |
+ row 2 col 2 |
+ row 2 col 3 |
+
+
+ | row 3 col 1 |
+ row 3 col 2 |
+ row 3 col 3 |
+
+
+
+
+ Tab 3
+
+
+
+
+
+ Tab 4
+
+
+
+ Tab 5
+
+
+
+
+
+ Show the code:
+
+
<section role="region">
+ <details name="lets-go" open>
+ <summary>Tab 1</summary>
+ <div>
+ <p>Content for Tab 1</p>
+ <p>Content for Tab 1</p>
+ </div>
+ </details>
+ <details name="lets-go">
+ <summary>Tab 2</summary>
+ <div>
+ <p>Just a random table</p>
+ <table>
+ <tr>
+ <td>row 1 col 1</td>
+ <td>row 1 col 2</td>
+ <td>row 1 col 3</td>
+ </tr>
+ <tr>
+ <td>row 2 col 1</td>
+ <td>row 2 col 2</td>
+ <td>row 2 col 3</td>
+ </tr>
+ <tr>
+ <td>row 3 col 1</td>
+ <td>row 3 col 2</td>
+ <td>row 3 col 3</td>
+ </tr>
+ </table>
+ </div>
+ </details>
+ <details name="lets-go">
+ <summary>Tab 3</summary>
+ <div>
+ <form action="javascript:void(0);">
+ <section role="form">
+ <input type="text" id="name" name="name" placeholder="Name:" required>
+ <label for="name">Name:</label>
+ </section>
+ <section role="form">
+ <input type="email" id="email" name="email" placeholder="Email:" required>
+ <label for="email">Email:</label>
+ </section>
+ <input type="submit" value="Submit">
+ </form>
+ </div>
+ </details>
+ <details name="lets-go">
+ <summary>Tab 4</summary>
+ <div>
+ <p>Content for Tab 4</p>
+ </div>
+ </details>
+ <details name="lets-go">
+ <summary>Tab 5</summary>
+ <div>
+ <p>Content for Tab 5</p>
+ </div>
+ </details>
+</section>
+
+
+
+
+
+
+
+ Show Old Notifications
+ The Notifications below will be removed in a future version.
+
+
+
+
+ Notificaton
+ DEPRECATED
+
+
+
+
+
+
+
+
+
+
+
+
+
+