Package card

import "gitlab.com/zoralab/bissetii/pkg/components/internal/card"

Package card is for rendering the information in various card styling.

The HTML template codes are written in Go’s string format under the corresponding group. This allows one to embed the HTML codes instead of parsing it from file.

Constants

All Bissetii Compressed Compiled CSS

const (
	CSSAMP = `.Card{width:var(--card-width);max-width:var(--card-max-width);height:var(--card-height);border-radius:var(--card--border-radius);margin-top:calc(var(--card-margin) + var(--card-transition-distance));display:grid;grid:minmax(0%, var(--card-thumbnails-height)) auto minmax(0%, var(--card-cta-height))/1fr;justify-items:var(--card-grid-spacing);overflow:var(--card-grid-overflow)}.Card:not(.embed){-webkit-box-shadow:var(--card-box-shadow);-moz-box-shadow:var(--card-box-shadow);box-shadow:var(--card-box-shadow);-webkit-transition:var(--card-transition-timing);-ms-transition:var(--card-transition-timing);-moz-transition:var(--card-transition-timing);-o-transition:var(--card-transition-timing);transition:var(--card-transition-timing)}.Card:not(.embed):hover,.Card:not(.embed):focus{-webkit-transform:var(--card-transform);-ms-transform:var(--card-transform);-moz-transform:var(--card-transform);-o-transform:var(--card-transform);transform:var(--card-transform)}.Card .card-thumbnail{grid-row-start:1;grid-row-end:2;place-self:center stretch;align-self:stretch;border-radius:0;object-fit:cover;overflow:hidden}.Card .card-content{grid-row-start:2;grid-row-end:3;display:block;margin:var(--card-content-margin);padding:var(--card-content-padding)}.Card .card-content h2,.Card .card-content h3,.Card .card-content h4,.Card .card-content h5,.Card .card-content h6{margin:var(--card-content-header-margin)}.Card .card-call-to-action{grid-row-start:3;grid-row-end:end;display:flex;flex-flow:row wrap;justify-content:flex-end;align-items:baseline;align-content:center;margin:var(--card-content-margin);padding:var(--card-content-padding)}.Card .card-call-to-action li{list-style:none;padding:0;margin:0}.Card .card-call-to-action a{border:var(--card-cta-link-border);border-radius:var(--card-cta-link-border-radius);font-weight:var(--card-cta-link-font-weight);margin-left:var(--card-cta-link-margin-left);padding:var(--card-cta-link-padding);color:var(--card-cta-link-color);background-color:var(--card-cta-link-background-color)}.Card .card-call-to-action a:first-child{--card-cta-link-margin-left:0}.Card .card-call-to-action a.pinpoint{--card-cta-link-margin-left:2.5rem;--card-cta-link-padding:.6rem 2.5rem;--card-cta-link-border:3px solid var(--color-primary-500);--card-cta-link-background-color:var(--color-primary-300)}`

	CSSCritical = `.Card{width:var(--card-width);max-width:var(--card-max-width);height:var(--card-height);border-radius:var(--card--border-radius);margin-top:calc(var(--card-margin) + var(--card-transition-distance));display:grid;grid:minmax(0%, var(--card-thumbnails-height)) auto minmax(0%, var(--card-cta-height))/1fr;justify-items:var(--card-grid-spacing);overflow:var(--card-grid-overflow)}.Card:not(.embed){-webkit-box-shadow:var(--card-box-shadow);-moz-box-shadow:var(--card-box-shadow);box-shadow:var(--card-box-shadow);-webkit-transition:var(--card-transition-timing);-ms-transition:var(--card-transition-timing);-moz-transition:var(--card-transition-timing);-o-transition:var(--card-transition-timing);transition:var(--card-transition-timing)}.Card:not(.embed):hover,.Card:not(.embed):focus{-webkit-transform:var(--card-transform);-ms-transform:var(--card-transform);-moz-transform:var(--card-transform);-o-transform:var(--card-transform);transform:var(--card-transform)}.Card .card-thumbnail{grid-row-start:1;grid-row-end:2;place-self:center stretch;align-self:stretch;border-radius:0;object-fit:cover;overflow:hidden}.Card .card-content{grid-row-start:2;grid-row-end:3;display:block;margin:var(--card-content-margin);padding:var(--card-content-padding)}.Card .card-content h2,.Card .card-content h3,.Card .card-content h4,.Card .card-content h5,.Card .card-content h6{margin:var(--card-content-header-margin)}.Card .card-call-to-action{grid-row-start:3;grid-row-end:end;display:flex;flex-flow:row wrap;justify-content:flex-end;align-items:baseline;align-content:center;margin:var(--card-content-margin);padding:var(--card-content-padding)}.Card .card-call-to-action li{list-style:none;padding:0;margin:0}.Card .card-call-to-action a{border:var(--card-cta-link-border);border-radius:var(--card-cta-link-border-radius);font-weight:var(--card-cta-link-font-weight);margin-left:var(--card-cta-link-margin-left);padding:var(--card-cta-link-padding);color:var(--card-cta-link-color);background-color:var(--card-cta-link-background-color)}.Card .card-call-to-action a:first-child{--card-cta-link-margin-left:0}.Card .card-call-to-action a.pinpoint{--card-cta-link-margin-left:2.5rem;--card-cta-link-padding:.6rem 2.5rem;--card-cta-link-border:3px solid var(--color-primary-500);--card-cta-link-background-color:var(--color-primary-300)}`

	CSSTablet     = ``

	CSSDesktop    = ``

	CSSWidescreen = ``

	CSSPrint      = ``
)

Constants for managing the package as a whole.

const (
	// Name is the block name (`{{- define "this-name" -}}`).
	Name = "card"

	// AMPName is the AMP HTML block name.
	AMPName = root.AMPPrefix + Name

	// ParametersComment are the list of comment headers
	// describing inputs.
	ParametersComment = `
{{- /* .Class             = Card class attribute                    */ -}}
{{- /* .ID                = Card id attribute                       */ -}}
{{- /* .Width             = Card width                              */ -}}
{{- /* .Height            = Card height                             */ -}}
{{- /* .Label             = Card name (used in aria-label)          */ -}}
{{- /* .Content           = Card content                            */ -}}
{{- /* .Thumbnail         = Card thumbnail image                    */ -}}
{{- /* .CTA               = Card List of call to action links       */ -}}
`
)

Dependencies are the dependent codes for building independent template.

This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.

const (
	// DepHTML is the vanilla HTML output type.
	DepHTML = `
{{- define "` + anchor.Name + `" -}}` + anchor.HTML + `{{- end -}}
{{- define "` + image.Name + `" -}}` + image.HTML + `{{- end -}}

`

	// DepAMPHTML is the Accelerated Mobile Pages HTML output
	// type.
	DepAMPHTML = `
{{- define "` + anchor.AMPName + `" -}}` + anchor.AMPHTML + `{{- end -}}
{{- define "` + image.AMPName + `" -}}` + image.AMPHTML + `{{- end -}}
`
)

Full HTML codes for rendering templates without needing to parse file.

const (
	// HTML is the vanilla HTML output type.
	HTML = `
<article class="Card {{- if .Class }} {{ .Class -}}{{- end -}}"
{{- if .ID }}

	id="{{- .ID -}}"
{{- end }}
{{- if or .Width .Height }}

	style=" {{- if .Width -}}--card-width: {{ .Width -}};{{- end }}

		{{- if .Height }}--card-height: {{ .Height -}};{{- end }}"
{{- end -}}
{{- if .Label }}

	aria-label="{{- .Label -}}"
{{- end -}}
>

	{{- if .Thumbnails }}

	<div class="card-thumbnail">

		{{- range $tb := .Thumbnails }}

		{{ template "` + image.Name + `" $tb -}}

		{{- end }}

	</div>

	{{- end }}

	{{- if .Content }}

		<div class="card-content">{{- .Content -}}</div>

	{{- end }}

	{{- if .CTA }}

		<ul class="card-call-to-action">

		{{- range $cta := .CTA }}

			<li>{{- template "` + anchor.Name + `" $cta -}}</li>

		{{- end }}

		</ul>

	{{- end }}
</article>
`

	// AMPHTML is the Accelerated Mobile Pages HTML output type.
	AMPHTML = `
<article class="Card {{- if .Class }} {{ .Class -}}{{- end -}}"
{{- if .ID }}

	id="{{- .ID -}}"
{{- end }}
{{- if or .Width .Height }}

	style=" {{- if .Width -}}--card-width: {{ .Width -}};{{- end }}

		{{- if .Height }}--card-height: {{ .Height -}};{{- end }}"
{{- end -}}
{{- if .Label }}

	aria-label="{{- .Label -}}"
{{- end -}}
>

	{{- if .Thumbnails }}

	<div class="card-thumbnail">

		{{- range $tb := .Thumbnails }}

		{{ template "` + image.AMPName + `" $tb -}}

		{{- end }}

	</div>

	{{- end }}

	{{- if .Content }}

		<div class="card-content">{{- .Content -}}</div>

	{{- end }}

	{{- if .CTA }}

		<ul class="card-call-to-action">

		{{- range $cta := .CTA }}

			<li>{{- template "` + anchor.AMPName + `" $cta -}}</li>

		{{- end }}

		</ul>

	{{- end }}
</article>
`
)

Data

type Data struct {
	Class     string
	ID        string
	Width     string
	Height    string
	Label     string
	Content   string
	Thumbnail *image.Data
	CTA       []*anchor.Data
}

Data is the data structure for rendering the component.