Skip to content

GitLab

Commit 91e52128 authored by Clarissa Lima Borges's avatar Clarissa Lima Borges
Browse files

cards: Create basic cards components

parent e5a7678f
Hide whitespace changes
Inline Side-by-side
documentation/components/cards.md
View file @ 91e52128
......@@ -3,4 +3,23 @@ layout: default
title: Cards
parent: Components
nav_order: 2
---
\ No newline at end of file
---
# Inputs
{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
1. TOC
{:toc}
---
<br>
Cards are used to display isolated pieces of content.
## Title and text
## Title, text and an image
## Title, text, an image and button
\ No newline at end of file
samples/cards/index.html 0 → 100644
View file @ 91e52128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../dist/index.css">
<title>Cards</title>
</head>
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded shadow-md-md bg-white max-w-6xl">
<h2 class="mb-4">Cards</h2>
<h3 class="my-8">Title and text</h3>
<div class="bg-white rounded rounded-md shadow-md overflow-hidden w-2/5 mt-8 ">
<div class="p-6">
<h4 class="font-semibold text-lg">GUADEC 2012</h4>
<div class="text-gnome-blue-500 text-xs font-semibold uppercase">December 5, 2012</div>
<div class="my-3">
GUADEC 2012 was an amazing event with amazing talks, amazing BoFs and amazing people!
</div>
</div>
</div>
<h3 class="my-8">Title, text and an image</h3>
<div class="bg-white rounded rounded-md shadow-md overflow-hidden w-2/5 mt-8">
<div class="h-1/2">
<img src="../../assets/guadec2012-group.png" alt="GUADEC 2012">
</div>
<div class="p-6">
<h4 class="font-semibold text-lg">GUADEC 2012</h4>
<div class="text-gnome-blue-500 text-xs font-semibold uppercase">December 5, 2012</div>
<div class="my-3">
GUADEC 2012 was an amazing event with amazing talks, amazing BoFs and amazing people!
</div>
</div>
</div>
<h3 class="my-8">Title, text, an image and button</h3>
<div class="bg-white rounded rounded-md shadow-md overflow-hidden w-2/5 mt-8">
<div class="h-1/2">
<img src="../../assets/guadec2012-group.png" alt="GUADEC 2012">
</div>
<div class="p-6">
<h4 class="font-semibold text-lg">GUADEC 2012</h4>
<div class="text-gnome-blue-500 text-xs font-semibold uppercase">December 5, 2012</div>
<div class="my-3">
GUADEC 2012 was an amazing event with amazing talks, amazing BoFs and amazing people!
</div>
<div class="w-full flex">
<button class="btn small ml-auto">Read more...</button>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
samples/index.html
View file @ 91e52128
......@@ -34,6 +34,11 @@
<button class="btn my-2 w-full">Inputs</button>
</a>
</li>
<li>
<a href="./cards/index.html">
<button class="btn my-2 w-full">Cards</button>
</a>
</li>
</ul>
</div>
</body>
......
src/components.pcss
View file @ 91e52128
@import "components/button.pcss";
@import "components/input.pcss";
\ No newline at end of file
@import "components/input.pcss";
@import "components/card.pcss";
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment