{
"componentChunkName": "component---src-templates-doc-template-js",
"path": "/docs/card",
"result": {"data":{"current":{"fields":{"page":{"path":"/docs/card","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Cards","markdown":"\nWe created 5 separate card components in simple and different views. The width of the cards is set to 100%, you can put it in any container and use it in that containers width.\n\n
\n
\n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n```html\n
\n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n```\n\n## Vertical Cards with Image\n\nWhen you are using vertical cards with images, you can use `.gra-card-media-top` in addition to the `.gra-card` class if you want the image on top or `.gra-card-media-bottom` if you want the image on bottom.\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n## Horizontal Cards with Image\n\nWhen you are using horizontal cards with images, primarly you should use `.gra-card-horizontal` in addition to the` .card`. And also if you want the image on left use the `.gra-card-media-left` and if you want the image on right use the `.gra-card-media-right`\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Card Title
\n
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
This is the card body.
\n
\n
\n
\n
\n```","mdtype":"MDHTML","section":"cards"},{"lang":"tr","title":"Kartlar","markdown":"\nBasit ve farklı görünümlerde 5 ayrı kart komponenti oluşturuldu. Kartların genişliği %100 olarak ayarlandı, herhangi bir kapsayıcı içerisine koyup o genişlikte kullanabilirsiniz.\n\n
\n
\n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n```html\n
\n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n```\n\n## Görsel İçeren Dikey Kartlar\n\nGörsel içeren dikey kartları kullanırken görselin üstte olmasını isterseniz `.gra-card` classına ek olarak `.gra-card-media-top`, altta olmasını isterseniz `.gra-card-media-bottom` kullanabilirsiniz.\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n## Görsel İçeren Yatay Kartlar\n\nGörsel içeren yatay kartları kullanırken öncelikle `.gra-card` classına ek olarak `.gra-card-horizontal` classını eklemelisiniz. Bunun yanında görselin solda olmasını isterseniz `.gra-card-media-left` , sağda olmasını isterseniz `.gra-card-media-right` kullanabilirsiniz.\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```\n\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n\n\n```html\n
\n
\n \n \n \n
\n
Kart Başlığı
\n
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
Kart içeriği
\n
\n
\n
\n
\n```","mdtype":"MDHTML","section":"cards"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/card/en.md","language":"en","intl":{"language":"en","languages":["en","tr"],"messages":{"404.pagenotfound":"Page Not Found","404.emptyroute":"Oops! The page you are looking for has been changed or removed.","404.gotodocs":"Go To Docs","404.gotohome":"Go To Home","title":"Gralig CSS","description":"A modest, grayish CSS Library","summary":"Gralig is a modest, grayish CSS library. It can be starting point for your CSS development.","author":"@erenesto","keywords":"css, css library, clean css, grayish, frontend, ui, modest, pure, clean design, lightweight css","pages.404":"Error 404","pages.index":"Gralig CSS","pages.docs":"Gralig Documentation","sidenavLinks.docs.name":"Introduction","sidenavLinks.colors.name":"Colors","sidenavLinks.grid.name":"Grid","sidenavLinks.dark.name":"Dark Mode","sidenavLinks.vars.name":"Variables","sidenavLinks.responsive.name":"Responsive","sidenavLinks.utils.name":"Utils","sidenavLinks.typography.name":"Typography","sidenavLinks.button.name":"Button","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Custom Inputs","sidenavLinks.checkbox.name":"Checkbox","sidenavLinks.radio.name":"Radio","sidenavLinks.switch.name":"Switch","sidenavLinks.nav.name":"Nav","sidenavLinks.navbar.name":"Navbar","sidenavLinks.footer.name":"Footer","sidenavLinks.breadcrumb.name":"Breadcrumb","sidenavLinks.card.name":"Card","sidenavLinks.alert.name":"Alert","sidenavLinks.list.name":"List","sidenavLinks.table.name":"Table","sidenavLinks.dropdown.name":"Dropdown","sidenavLinks.progress.name":"Progress","sidenavLinks.loading.name":"Loading","sidenavLinks.modal.name":"Modal","words.copy":"Copy","words.copied":"Copied!","words.docs":"Docs","words.builtwith":"Built with"},"routed":false,"originalPath":"/docs/card","redirect":false,"defaultLanguage":"en"}}},
"staticQueryHashes": ["63159454"]}
![\"Card](\"https://res.cloudinary.com/erenesto/image/upload/v1587131749/wb8kzewydi4y9n9uaidz.jpg\")
\n ![\"Card](\"test-image.jpg\")
\n ![\"Card](\"https://res.cloudinary.com/erenesto/image/upload/v1587131749/e16fm6knahyvtlnjmhf3.jpg\")
\n