Created
June 3, 2015 06:28
-
-
Save hughbris/8b5464f7b8bee61995ce to your computer and use it in GitHub Desktop.
Design pattern: radio buttons across with aligned pictorial headings and blurb text
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
| <?xml version="1.0" encoding="utf-8" ?> | |
| <!DOCTYPE html | |
| PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" | |
| > | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- bru --> | |
| <head> | |
| <title>What will it be? You must choose</title> | |
| <style type="text/css"> | |
| /* <![CDATA[ */ | |
| .field.radios.logos input { | |
| position: relative; | |
| top: 1em; | |
| margin: 0.5em; | |
| } | |
| .field.radios.logos .option { | |
| width: 45%; | |
| text-align: center; | |
| display: inline-block; | |
| padding: 1em; | |
| vertical-align: top; | |
| } | |
| .field.radios.logos label { | |
| width: 100%; | |
| } | |
| .field.radios.logos label .blurb { | |
| text-align: justify; | |
| font-weight: normal; | |
| } | |
| /* ]]> */ | |
| </style> | |
| </head> | |
| <body> | |
| <form action="" method="POST"> | |
| <fieldset> | |
| <legend>Select an option if you dare</legend> | |
| <!-- <p class="hint fieldset"> *** See https://gist.github.com/hughbris/aa9c0d75132f023bba3b for pattern and CSS *** </p> --> | |
| <div class="field radios logos required"> | |
| <div class="option"> | |
| <input name="radioOption" id="radioA" value="valueA" type="radio" /> | |
| <label for="radioA"> | |
| <h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_repo.png" alt="ElaborationTitleA: the cosy box"></h3> | |
| <p class="blurb">This is the obvious choice for obvious reasons. Obviously. We hold it self-evident. Some things don't need to be explained because they are so obvious, and yet we feel the need to fill the paragraph with words. We call these filler words (obviously).</p> | |
| </label> | |
| </div> | |
| <div class="option"> | |
| <input checked="checked" name="radioOption" id="radioB" value="valueB" type="radio" /> | |
| <label for="radioB"> | |
| <h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_fork.png" alt="ElaborationTitleB: the forks"></h3> | |
| <p class="blurb">If you have rocks in your head, choose this one. Why? Because no-one really does this. You might think you are being "individual", "random", or making some sort of statement against humanity, but really have these peanuts and lie down with a towel between your legs.</p> | |
| </label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment